@use 'sass:color';

html {
    height: 100%;
    overflow: hidden;
}

body {
    @extend .font-regular;

    min-height: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
    font-size: 14px;
    color: #eee;
}

strong {
    @extend .font-bold;
}

.noSelect {
    user-select: none;
}

.allowSelect {
    user-select: initial;
}

#ui-root {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    max-height: 100%;

    > .content {
        max-height: 100%;
        overflow: hidden;
    }
}

#canvas-3d {
    width: 100%;
    height: 100%;
}

.asset-icon-prefix {
    &.type-animation::before {
        content: '\E213';
    }

    &.type-animstategraph::before {
        content: '\E412';
    }

    &.type-audio::before {
        content: '\E210';
    }

    &.type-cubemap::before {
        content: '\E220';
    }

    &.type-folder::before {
        content: '\E139';
    }

    &.type-bundle::before {
        content: '\E410';
    }

    &.type-json::before {
        content: '\E207';
    }

    &.type-material::before {
        content: '\E195';
    }

    &.type-model::before {
        content: '\E188';
    }

    &.type-scene::before {
        content: '\E188';
    }

    &.type-script::before {
        content: '\E392';
    }

    &.type-sprite::before {
        content: '\E413';
    }

    &.type-texture::before {
        content: '\E201';
    }

    &.type-textureatlas::before {
        content: '\E201';
    }

    &.type-text::before {
        content: '\E209';
    }

    &.type-html::before {
        content: '\E205';
    }

    &.type-css::before {
        content: '\E206';
    }

    &.type-shader::before {
        content: '\E202';
    }

    &.type-binary::before {
        content: '\E208';
    }

    &.type-font::before {
        content: '\E208';
    }

    &.type-gsplat::before {
        content: '\E208';
    }
}

.assets-drop-area {
    outline: none;
}

.drop-area-project-img {
    z-index: 301; // larger than picker-project
}

.ui-tooltip {
    &.reference {
        > .inner {
            position: relative;
            max-width: 320px;
            padding: 16px;
            white-space: normal;

            > h1 {
                @extend .font-regular;

                margin: 0;
                line-height: normal;
                font-size: 14px;
                font-weight: normal;
            }

            > h2 {
                @extend .font-regular;

                margin: 8px 0 0;
                line-height: normal;
                font-size: 12px;
                font-weight: normal;
                color: $text-dark;
            }

            > .tag {
                position: absolute;
                top: 16px;
                right: 16px;
                line-height: 22px;
                padding: 0 8px;
                font-size: 14px;
                color: $text-secondary;
                background-color: $bcg-dark;
            }

            > p {
                @extend .font-regular;

                margin: 16px 0 0;
                font-size: 12px;
                line-height: 20px;
                font-weight: 100;
                color: color.mix($text-dark, $text-primary, 50%);

                &:first-child {
                    margin-top: 0;
                }
            }

            > .ui-code {
                line-height: normal;
                margin: 16px -16px -16px;
                min-width: 240px;
            }

            > .reference {
                display: inline-block;
                height: 32px;
                line-height: 32px;
                padding: 0 0 0 16px;
                margin-top: 16px;
                font-size: 12px;
                color: $text-primary;
                background-color: $text-darkest;

                &:hover {
                    text-decoration: none;
                    background-color: $text-active;

                    &::after {
                        background-color: color.mix($text-active, color.mix($bcg-darkest, #000, 75%), 50%);
                    }
                }

                &::after {
                    @extend .font-icon;

                    content: '\E166';
                    float: right;
                    width: 32px;
                    height: 32px;
                    line-height: 32px;
                    margin-left: 16px;
                    font-size: 20px;
                    text-align: center;
                    background-color: $bcg-primary;
                }
            }
        }
    }

    &.previous-selection {
        > .inner {
            line-height: 18px;
            padding: 8px 16px;
            text-align: right;

            > span {
                font-weight: bold;
            }
        }
    }

    &.light-mapper {
        > .inner {
            > .header {
                display: block;
            }

            > .auto-toggle {
                > .ui-checkbox {
                    margin: 0 8px 0 0;
                }

                > .ui-label {
                    margin: 0;
                    vertical-align: middle;
                }
            }

            > .uv1 {
                color: $text-secondary;
                max-width: 200px;
                white-space: normal;
                line-height: normal;
                padding: 2px 0 8px;

                &.hidden {
                    display: none;
                }

                > .ui-button {
                    margin: 0;
                    padding: 0;
                    line-height: normal;
                    border: none;
                    color: $text-active;
                    background-color: transparent;

                    &:hover {
                        text-decoration: underline;
                        color: $text-primary;
                    }
                }
            }
        }
    }

    &.launch-tooltip {
        > .inner {
            max-width: 300px;
            line-height: 1.8;
            white-space: normal;
            padding: 5px 15px;
            font-size: 12px;
        }

        &.invisible {
            display: none;
        }
    }

    &.assets-search-field {
        > .inner {
            line-height: normal;
            padding: 1px 16px;
            white-space: normal;
            max-width: 512px;

            > h1 {
                @extend .font-regular;

                margin: 16px 0 0;
                line-height: normal;
                font-size: 14px;
                font-weight: bold;
            }

            > p {
                > strong {
                    color: $text-active;
                }

                > code {
                    color: $text-active;
                    background-color: #000;
                    font-size: 11px;
                    padding: 1px 2px;
                }
            }
        }
    }

    &.version-control-checkbox-tooltip {
        > .inner {
            max-width: 300px;
            line-height: 1.8;
            white-space: normal;
            padding: 5px 15px;
            font-size: 12px;
        }
    }
}

.ui-panel.attributes {
    &.foldable.horizontal {
        &.folded {
            > .ui-header {
                overflow: visible;
                text-overflow: normal;
                max-width: auto;

                > .inspector-controls {
                    display: none;
                }
            }
        }
    }

    > .ui-header {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        text-transform: uppercase;

        &::after {
            content: '\E184';
            font-weight: 200;
            font-size: 14px;
        }
    }

    &.asset-preview {
        &.large {
            > .asset-preview-container {
                padding-top: 100%;
            }

            > .content {
                margin-top: 100%;
            }
        }

        &.animate {
            > .asset-preview-container > .asset-preview {
                transition: padding 100ms, width 100ms;
            }

            > .content {
                transition: margin-top 100ms;
            }
        }

        > .asset-preview-container {
            position: relative;
            background-color: $bcg-darker;
            height: 0;
            padding-top: 45%;

            &:hover {
                > .ui-button,
                > .ui-button:not(.pinned),
                > .cubeMapMipLevel {
                    display: block;

                    &.hidden {
                        display: none;
                    }
                }
            }

            > .asset-preview {
                max-height: 500px;

                @extend .noSelect;

                &.flipY {
                    transform: scale(1, -1);
                }
            }

            > .asset-preview {
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                border: 8px solid $bcg-darker;
                border-top: 0;
                box-sizing: border-box;
                margin: auto;
                background-position: center;
                background-size: contain;
                background-repeat: no-repeat;
            }

            > .ui-button {
                @extend .font-icon;

                &:not(.pinned) {
                    display: none;
                }

                position: absolute;
                bottom: 0;
                right: 0;
                width: 32px;
                line-height: 32px;
                margin: 0;
                padding: 0;
                border: none;
                font-size: 18px;
                text-align: center;
                cursor: pointer;
                color: $text-secondary;
                background-color: $bcg-darker;

                &:hover {
                    color: $text-primary;
                    background-color: $bcg-darkest;
                }

                &.active {
                    color: $text-active;
                }

                &.box {
                    bottom: 32px;
                }
            }

            > .cubeMapMipLevel {
                position: absolute;
                display: none;
                bottom: 8px;
                right: 8px;
                margin: 0;
                width: 20px;
            }
        }

        > .content {
            margin-top: 50%;
        }
    }

    .ui-panel {
        &.field {
            > .content {
                > .ui-label:nth-child(2) {
                    padding: 0 8px;
                    font-family: 'Lucida Console', Monaco, monospace;
                    font-weight: normal;
                    font-size: 11px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                > .export-model-archive {
                    cursor: pointer;

                    &:hover {
                        color: $text-active;
                        text-decoration: underline;

                        @extend .noSelect;
                    }
                }

                > .ui-label.error {
                    color: #ff2020;
                }
            }
        }

        &.field-number,
        &.field {
            > .content {
                > .ui-button.generate-uv1 {
                    height: 22px;
                    line-height: 22px;
                    font-size: 12px;
                    text-transform: uppercase;
                }

                > .ui-progress.field-progress {
                    width: 100%;
                    height: 8px;
                    margin: 11px 3px 0;
                }
            }
        }

        .ui-label.label-field {
            @extend .noSelect;

            flex-shrink: 0;
            width: 27%;
            font-size: 12px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .ui-label.label-infield {
            font-size: 10px;
            line-height: 24px;
            vertical-align: top;
        }

        &.field-tags {
            line-height: 1;

            > .content > .ui-panel {
                width: 100%;

                > .content {
                    padding: 2px;

                    > .ui-text-field {
                        width: calc(100% - 26px);
                        margin: 1px 0 1px 1px;
                        flex-shrink: 0;
                        float: left;
                    }

                    > .ui-select-field {
                        width: calc(100% - 2px);
                        margin: 1px 0 1px 1px;
                    }

                    > .ui-button {
                        margin: 1px 1px 1px 0;
                        border-left: none;
                        padding: 0;
                        width: 24px;
                        line-height: 22px;
                        text-align: center;

                        @extend .font-icon;

                        &:hover {
                            color: $text-active;
                        }
                    }

                    > .ui-panel.tags {
                        margin-top: 1px;

                        &.disabled > .content {
                            > .tag {
                                opacity: 0.5;

                                > .icon {
                                    cursor: default;
                                }
                            }
                        }

                        > .content {
                            flex-flow: row wrap;
                            max-height: 188px;
                            overflow: hidden auto;

                            > .tag {
                                position: relative;
                                font-family: 'Lucida Console', Monaco, monospace;
                                font-weight: normal;
                                font-size: 10px;
                                display: inline-block;
                                line-height: 21px;
                                height: 20px;
                                margin: 1px;
                                padding: 0 24px 0 8px;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                word-break: break-all;
                                background-color: $bcg-dark;
                                cursor: default;

                                &:hover {
                                    color: $text-primary;
                                    background-color: $bcg-darkest;

                                    > .icon {
                                        padding-left: 0;
                                    }
                                }

                                &.partial {
                                    opacity: 0.5;
                                }

                                > .icon {
                                    @extend .font-icon;

                                    position: absolute;
                                    right: 0;
                                    top: 0;
                                    width: 16px;
                                    line-height: 20px;
                                    padding-right: 1px;
                                    font-size: 12px;
                                    text-align: center;
                                    cursor: pointer;
                                    color: $text-secondary;
                                    border-left: 1px solid $bcg-darker;
                                    background-color: $bcg-dark;

                                    &:hover {
                                        color: #d34141;
                                        background-color: $bcg-darkest;
                                        border-left-color: $bcg-darkest;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

        &.field-asset {
            > .content > .top > .controls > .ui-select-field {
                float: right;
                width: 48px;
                height: 24px;
                margin: 5px 3px 0 6px;
            }

            &.channel {
                > .content {
                    > .top {
                        > .ui-label {
                            float: left;
                            width: calc(100% - 60px);
                        }

                        > .ui-select-field {
                            float: right;
                            width: 48px;
                        }
                    }
                }
            }

            > .content {
                > .ui-image-field {
                    flex-shrink: 0;
                    margin-right: 3px;
                    background-color: $bcg-dark;

                    &:hover {
                        background-color: $bcg-darkest;

                        &::after {
                            border-bottom: 24px solid $bcg-darkest;
                        }
                    }

                    &.empty {
                        &::before {
                            display: block;
                            content: '';
                            width: 60px;
                            height: 60px;
                            margin: 2px;
                            background-color: #465659;
                            background-image:
                                linear-gradient(45deg, #5b696c 25%, transparent 25%, transparent 75%, #5b696c 75%, #5b696c 100%),
                                linear-gradient(45deg, #5b696c 25%, transparent 25%, transparent 75%, #5b696c 75%, #5b696c 100%);
                            background-size: 24px 24px;
                            background-position: 0 0, 12px 12px;
                        }
                    }

                    &::after {
                        width: 0;
                        height: 0;
                        border: none;
                        background-color: transparent;
                        border-bottom: 24px solid $bcg-dark;
                        border-left: 24px solid transparent;
                    }

                    > canvas.preview {
                        background-color: $bcg-dark;
                    }
                }

                > .top {
                    width: 100%;

                    > .controls {
                        display: flex;
                        margin-top: 10px;
                        height: 32px;

                        > .ui-label {
                            padding-right: 4px;
                            line-height: 28px;
                        }

                        > .ui-button {
                            color: $text-dark;
                            height: 28px;
                            line-height: 28px;

                            @extend .font-icon;

                            font-size: 16px;
                            text-align: center;
                            background: transparent;
                            border: none;
                            margin-left: 0;
                            margin-right: 0;

                            &.disabled {
                                &:hover {
                                    color: $text-dark;
                                    background-color: transparent;
                                }
                            }

                            &:last-child {
                                margin-right: 4px;
                                line-height: 32px;

                                &:hover {
                                    color: #d34141;

                                    &.disabled {
                                        color: $text-dark;
                                    }
                                }
                            }

                            &:hover {
                                background-color: $bcg-darkest;
                                color: $text-primary;
                            }
                        }
                    }

                    > .ui-label {
                        width: calc(100% - 6px);
                        height: 24px;
                        line-height: 22px;
                        margin: 3px;
                        padding: 0 28px 0 8px;
                        overflow: hidden;
                        text-overflow: clip;
                        font-family: inconsolatamedium;
                        font-size: 12px;
                        background-color: $bcg-dark;
                        border: 1px solid $bcg-darker;
                        box-sizing: border-box;
                        cursor: pointer;

                        &:hover {
                            background-color: $bcg-darkest;
                            color: $text-primary;
                        }
                    }

                    > .ui-label[placeholder] {
                        &::after {
                            font-size: 24px;
                            line-height: 14px;
                            height: 22px;
                            background-color: $bcg-dark;
                        }
                    }
                }
            }

            &.active {
                outline: 1px solid $text-active;
                z-index: 1;
                background-color: $bcg-darkest;

                > .content {
                    > .top {
                        > .controls {
                            > .ui-label {
                                color: $text-active;
                            }
                        }

                        > .ui-label {
                            color: $text-active;
                        }
                    }
                }
            }
        }

        .add-entity {
            position: relative;
            font-size: 12px;
            font-family: inconsolatamedium;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding-right: 20px;
            padding-left: 8px;
            height: 22px;
            line-height: 22px;
            background-color: $bcg-dark;

            &[placeholder] {
                &::after {
                    font-size: 24px;
                    line-height: 14px;
                }
            }

            &.null {
                color: $text-darkest;
            }

            &:hover {
                cursor: pointer;
                background-color: $bcg-darkest;
                color: $text-primary;
            }

            > .icon {
                position: absolute;
                top: 0;
                right: 0;
                width: 22px;
                height: 22px;
                line-height: 22px;
                margin: 0;
                padding: 0;
                border: none;

                @extend .font-icon;

                font-size: 16px;
                text-align: center;

                &:hover {
                    color: $text-active;
                }

                &::after {
                    content: '\E132';
                }
            }
        }
    }

    .ui-list {
        &.model-nodes {
            > .ui-list-item {
                height: auto;
                line-height: 34px;
                padding-right: 0;
                overflow: hidden;

                > .ui-image-field {
                    float: right;
                    background-position: center center;
                    background-color: black;
                }
            }
        }

        &.related-assets {
            > .ui-list-item {
                &::before {
                    content: '\E209';

                    @extend .font-icon;

                    font-size: 14px;
                    padding-right: 8px;
                    color: $text-darkest;
                }

                @extend .asset-icon-prefix;
            }
        }
    }

    .cubemap-viewport {
        > .content {
            padding: 4px;
            overflow: hidden;
            background-color: $bcg-dark;

            > .face {
                position: relative;
                float: left;
                width: 25%;
                height: 0;
                cursor: pointer;
                padding-bottom: 25%;
                font-size: 12px;
                background-image: url('/editor/scene/img/asset-placeholder-texture.png');
                background-position: center center;
                background-repeat: no-repeat;
                background-size: 100% 100%;
                background-color: #07f;
                color: rgb(255 255 255 / 50%);

                &:hover {
                    outline: $text-active 2px solid;
                    z-index: 1;

                    > .face-name {
                        color: $text-primary;
                    }

                    > .clear {
                        display: block;
                    }
                }

                &.empty {
                    > .clear {
                        display: none;
                    }
                }

                > .face-name {
                    float: left;
                    color: $text-secondary;
                    padding: 2px 4px;
                    background-color: rgba($bcg-dark, 0.8);
                }

                > .clear {
                    display: none;
                    position: absolute;
                    top: 0;
                    right: 0;
                    width: 22px;
                    height: 22px;
                    line-height: 20px;
                    background-color: #364346;
                    cursor: pointer;

                    @extend .font-icon;

                    font-size: 16px;
                    text-align: center;

                    &:hover {
                        color: #d34141;
                        background-color: #20292b;
                    }

                    &::after {
                        content: '\E124';
                        font-weight: 200;
                    }
                }
            }

            > .face-top {
                margin-left: 25%;
                margin-right: 50%;
            }

            > .face-bottom {
                margin-left: 25%;
                margin-right: 50%;
            }
        }
    }

    .ui-panel.component {
        outline: none;

        > header {
            text-transform: uppercase;
        }

        &.foldable {
            > header {
                border-top: 1px solid $bcg-darker;

                &:hover {
                    border-top-color: $bcg-darkest;
                    background-color: $bcg-darkest;
                }
            }

            &.folded {
                > header {
                    background-color: $bcg-primary;

                    &:hover {
                        border-top-color: $bcg-darkest;
                        background-color: $bcg-darkest;
                    }
                }
            }
        }

        &.entity {
            > header {
                border-top: 1px solid $bcg-dark;

                > .title {
                    &::before {
                        content: '\E243';

                        @extend .font-icon;

                        font-size: 14px;
                        float: left;
                        width: 24px;
                        margin-right: 4px;
                        line-height: 32px;
                        text-align: center;
                        color: $text-active;
                    }
                }

                > .component-toggle-label {
                    float: right;
                    margin: 0 8px 0 0;
                    line-height: 32px;
                }

                > .ui-checkbox.component-toggle {
                    float: right;
                    width: 30px;
                    height: 16px;
                    margin: 7px 4px 0 0;
                    background-color: $bcg-primary;
                }

                > .ui-button.component-remove {
                    float: right;
                    width: 32px;
                    height: 32px;
                    line-height: 32px;
                    margin: 0;
                    padding: 0;
                    border: none;

                    @extend .font-icon;

                    font-size: 14px;
                    text-align: center;
                    background-color: transparent;

                    &:hover {
                        color: #d34141;
                        background-color: #20292b;
                    }

                    &::after {
                        content: '\E124';
                        font-weight: 200;
                    }
                }
            }

            &.script > header > .title::before {
                content: '\E236';
            }

            &.model > header > .title::before {
                content: '\E188';
            }

            &.animation > header > .title::before {
                content: '\E198';
            }

            &.audiosource > header > .title::before {
                content: '\E197';
            }

            &.sound > header > .title::before {
                content: '\E197';
            }

            &.collision > header > .title::before {
                content: '\E187';
            }

            &.rigidbody > header > .title::before {
                content: '\E189';
            }

            &.particlesystem > header > .title::before {
                content: '\E199';
            }

            &.light > header > .title::before {
                content: '\E194';
            }

            &.audiolistener > header > .title::before {
                content: '\E196';
            }

            &.camera > header > .title::before {
                content: '\E212';
            }

            &.screen > header > .title::before {
                content: '\E403';
            }

            &.element > header > .title::before {
                content: '\E378';
            }

            &.button > header > .title::before {
                content: '\E405';
            }

            &.scrollview > header > .title::before {
                content: '\E408';
            }

            &.scrollbar > header > .title::before {
                content: '\E409';
            }

            &.sprite > header > .title::before {
                content: '\E395';
            }

            &.layoutgroup > header > .title::before,
            &.layoutchild > header > .title::before {
                content: '\E143';
            }

            &.gsplat > header > .title::before {
                content: '\E217';
            }
        }

        &.light {
            .ui-button.shadowUpdate {
                @extend .font-icon;

                font-weight: bold;
                text-align: center;
                line-height: 24px;
                width: 24px;
                height: 24px;
                padding: 0;
            }
        }

        &.particlesystem {
            > .content {
                > .controls {
                    > .content {
                        > .ui-button {
                            @extend .font-icon;

                            padding: 0;
                            width: 22px;
                            height: 22px;
                            line-height: 22px;
                            text-align: center;

                            &.pause {
                                font-family: Arial, sans-serif;
                                font-size: 10px;
                                line-height: 20px;
                            }
                        }

                        > .ui-progress {
                            margin: 12px 0 0 3px;
                        }
                    }
                }
            }
        }

        &.variants {
            > .content {
                > .ui-label.pvr-warning {
                    &:not(.hidden) {
                        display: block;
                    }

                    color: #d34141;
                    text-align: right;
                    font-size: 12px;
                }

                > .ui-panel {
                    > .content {
                        > .ui-label.size {
                            vertical-align: top;
                            font-size: 10px;
                            line-height: 24px;
                            text-align: right;
                            flex-grow: 1;
                            color: $text-dark;
                        }

                        > .ui-checkbox {
                            &.disabled {
                                background-color: $bcg-dark;

                                &::after {
                                    content: none;
                                }
                            }
                        }
                    }
                }
            }
        }

        &.model,
        &.element {
            > .content {
                .add-batch-group {
                    color: $text-active;

                    &::before {
                        content: '\E120';
                        padding-right: 8px;

                        @extend .font-icon;

                        color: $text-active;
                    }
                }
            }
        }

        &.script {
            > .content {
                padding-top: 6px;

                > .ui-text-field.add-script {
                    position: relative;
                    display: block;
                    width: calc(100% - 2px);
                    margin: 0 0 6px;

                    &:hover,
                    &:focus,
                    &.focus,
                    &.not-empty {
                        &::before,
                        &::after {
                            content: '';
                        }
                    }

                    &::before {
                        content: '\E120';
                        position: absolute;
                        top: 0;
                        left: 8px;

                        @extend .font-icon;

                        font-weight: bold;
                        line-height: 24px;
                    }

                    &::after {
                        content: 'Add Script';
                        position: absolute;
                        right: auto;
                        left: 30px;
                        top: 0;
                        padding: 0;
                        line-height: 24px;
                        color: $text-secondary;

                        @extend .font-bold;

                        font-weight: bold;
                        font-size: 12px;
                        text-transform: uppercase;
                    }
                }

                > .ui-list.scripts-autocomplete {
                    position: absolute;
                    top: 30px;
                    left: 6px;
                    right: 6px;
                    width: auto;
                    max-height: 220px;
                    margin: 0;
                    border-top: none;
                    z-index: 1;
                    overflow-y: auto;
                    background-color: $bcg-darkest;

                    > .ui-list-item {
                        color: $text-primary;
                        border-color: $bcg-darker;

                        &:hover,
                        &.active {
                            color: $text-active;
                        }

                        &.selected {
                            background-color: transparent;
                        }

                        &.new {
                            &::before {
                                content: '\E120';

                                @extend .font-icon;

                                font-size: 14px;
                                padding-right: 4px;
                            }
                        }
                    }
                }

                > .scripts {
                    > .content {
                        > .dragPlaceholder {
                            margin-bottom: 1px;
                            background-color: $bcg-dark;
                            border: 4px solid $text-active;

                            &:last-child {
                                margin-bottom: 0;
                            }
                        }

                        > .ui-panel {
                            border-bottom: 1px solid $bcg-darker;

                            &.dragged {
                                opacity: 0.5;
                            }

                            &:last-child {
                                border-bottom: none;
                            }

                            > .ui-header {
                                background-color: $bcg-dark;
                                padding-left: 0;
                                white-space: normal;

                                > .handle {
                                    float: left;
                                    width: 12px;
                                    height: 24px;
                                    margin: 4px 2px;
                                    cursor: move;

                                    @extend .noSelect;

                                    $color: color.mix($text-darkest, $bcg-primary, 50%);
                                    $size: 6px;
                                    $inner-radius: 20%;
                                    $outer-radius: 55%;

                                    background: radial-gradient($color $inner-radius, transparent $outer-radius);
                                    background-size: $size $size;

                                    &:hover {
                                        $color: $text-primary;

                                        background: radial-gradient($color $inner-radius, transparent $outer-radius);
                                        background-size: $size $size;
                                    }
                                }

                                > .title {
                                    padding: 0 8px;

                                    @extend .noSelect;

                                    white-space: nowrap;

                                    &.link {
                                        color: $text-active;
                                        cursor: pointer;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        max-width: calc(100% - 192px);

                                        &:hover {
                                            text-decoration: underline;
                                        }
                                    }
                                }

                                > .edit,
                                > .parse {
                                    @extend .font-icon;

                                    width: 32px;
                                    height: 32px;
                                    line-height: 32px;
                                    margin: 0;
                                    padding: 0;
                                    background-color: transparent;
                                    border: none;
                                    font-size: 14px;
                                    text-align: center;

                                    &:hover {
                                        background-color: #20292b;
                                    }

                                    &.error {
                                        color: #d34141;
                                    }
                                }

                                > .remove {
                                    float: right;
                                    width: 32px;
                                    height: 32px;
                                    line-height: 32px;
                                    margin: 0;
                                    padding: 0;
                                    background-color: transparent;
                                    border: none;

                                    @extend .font-icon;

                                    font-size: 14px;
                                    text-align: center;

                                    &:hover {
                                        color: #d34141;
                                        background-color: #20292b;
                                    }

                                    &::after {
                                        content: '\E124';
                                        font-weight: 200;
                                    }
                                }

                                > .component-toggle-label {
                                    float: right;
                                    margin: 0 8px 0 0;
                                    line-height: 32px;
                                }

                                > .ui-checkbox.component-toggle {
                                    float: right;
                                    width: 30px;
                                    height: 16px;
                                    margin: 7px 4px 0 0;
                                    background-color: $bcg-primary;
                                }

                                > .invalid-script {
                                    float: left;
                                    width: 32px;
                                    height: 32px;
                                    line-height: 34px;
                                    margin: 0 -8px 0 0;
                                    text-align: center;
                                    font-size: 22px;
                                    font-weight: bold;
                                    color: #f30;
                                }
                            }

                            > .content {
                                .label-field {
                                    line-height: 24px;
                                    margin-left: 6px;
                                }
                            }
                        }
                    }
                }
            }
        }

        &.asset-script {
            > .ui-header {
                > .parse-script {
                    background-color: transparent;
                    border: none;
                    line-height: 32px;
                    float: right;
                    margin: 0;

                    &::before {
                        float: left;
                        content: '\E128';

                        @extend .font-icon;

                        font-size: 14px;
                        padding-right: 8px;
                        vertical-align: middle;
                    }

                    &:hover {
                        color: $text-active;
                        background-color: #20292b;
                    }

                    &.disabled:hover {
                        color: $text-secondary;
                        background-color: transparent;
                    }
                }
            }

            > .content {
                .ui-panel.validation {
                    overflow: hidden;
                    background-color: $bcg-dark;

                    > .content {
                        padding: 8px 8px 4px;

                        > .ui-label {
                            display: block;
                            color: #f30;
                            font-size: 12px;
                            margin: 0;
                            line-height: normal;
                        }
                    }
                }

                > .ui-label.loading {
                    display: block;
                    line-height: 32px;
                    margin: 0 0 3px;
                    padding: 0 8px;
                    font-size: 12px;

                    @extend .font-bold;

                    color: $text-primary;
                    background-color: $bcg-dark;
                    border: 1px solid $bcg-darker;

                    &.hidden {
                        display: none;
                    }
                }

                > .ui-panel.scripts {
                    border: 1px solid $bcg-darker;
                    background-color: transparent;

                    &.empty {
                        border: none;

                        > .content {
                            > .ui-label {
                                display: block;
                                margin-top: 0;
                                line-height: normal;
                                text-align: center;
                            }
                        }
                    }

                    > .content {
                        > .ui-panel.script {
                            background-color: transparent;
                            border-bottom: 1px solid $bcg-darker;

                            &:last-child {
                                border-bottom: none;
                            }

                            > .ui-header {
                                background-color: $bcg-dark;
                            }

                            > .content {
                                > .validation {
                                    > .content {
                                        padding-top: 0;
                                    }
                                }

                                > .attr {
                                    display: block;
                                    font-size: 12px;

                                    &:hover {
                                        background-color: color.mix($bcg-dark, $bcg-primary, 50%);
                                    }

                                    > .content {
                                        padding: 0 5px;

                                        > .type {
                                            float: right;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

        > .content {
            padding: 8px 6px;

            .fields-divider {
                height: 1px;
                background-color: $bcg-dark;
                margin: 4px 0;
            }

            > .ui-button.add-component {
                display: block;
                background-color: $bcg-dark;
                text-transform: uppercase;
                font-size: 12px;
                border: none;
                margin-top: 5px;
                position: relative;
                padding-left: 30px;
                height: 26px;
                line-height: 28px;

                @extend .font-bold;

                &.hidden {
                    display: none;
                }

                &:hover {
                    background-color: $bcg-darkest;

                    &::before {
                        color: $text-active;
                    }
                }

                &::before {
                    position: absolute;
                    top: 0;
                    left: 8px;
                    content: '\E120';

                    @extend .font-icon;

                    font-size: 14px;
                    text-align: center;
                }
            }

            > .ui-panel.buttons {
                > .content {
                    display: flex;

                    > .ui-button.large-with-icon {
                        flex-grow: 1;
                        width: 100%;

                        &.download-asset::before {
                            content: '\E228';
                        }

                        &.edit-script::before {
                            content: '\E130';
                        }

                        &.sprite-editor::before {
                            content: '\E395';
                        }
                    }
                }
            }

            > .ui-panel.buttons > .content > .ui-button.large-with-icon,
            > .ui-button.large-with-icon {
                display: block;
                text-align: center;

                &::before {
                    content: '?';
                    line-height: 23px;
                    padding-right: 8px;

                    @extend .font-icon;

                    font-size: 16px;
                    text-align: center;
                    vertical-align: middle;
                }

                &.parse-script::before {
                    content: '\E120';
                }

                &.calculate-meta {
                    &.hidden {
                        display: none;
                    }

                    &::before {
                        content: '\E131';
                    }
                }

                &.compress-asset {
                    color: $text-active;

                    &.disabled {
                        color: $text-primary;
                    }

                    &:hover {
                        color: $text-primary;
                    }

                    &::before {
                        content: '\E278';
                    }
                }
            }

            > .ui-button.override-material,
            .ui-button.loading-screen {
                flex-grow: 1;
                background-color: $bcg-dark;

                &:hover {
                    background-color: $bcg-darkest;

                    &::before {
                        color: $text-active;
                    }
                }

                text-transform: uppercase;
                font-size: 10px;
                border: none;
                position: relative;
                height: 28px;
                line-height: 30px;
                padding-left: 28px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;

                @extend .font-bold;

                &::before {
                    position: absolute;
                    top: 0;
                    left: 8px;

                    @extend .font-icon;

                    font-size: 14px;
                    text-align: center;
                }
            }

            > .ui-button.override-material::before {
                content: '\E184';
                font-size: 14px;
                font-weight: 200;
            }

            > .ui-button.loading-screen::before {
                content: '\E184';
                font-size: 14px;
                font-weight: 200;
            }

            > .ui-button.loading-screen.add::before {
                content: '\E120';
                font-size: 14px;
                top: 0;
            }

            > .ui-button.add-script,
            .ui-button.add-sound-slot,
            .ui-button.add-batch-group,
            .ui-button.add-clip,
            .ui-button.add-i18n-asset {
                margin: 0 0 8px;
                background-color: $bcg-dark;

                &:hover {
                    background-color: $bcg-darkest;

                    &::before {
                        color: $text-active;
                    }
                }

                text-transform: uppercase;
                font-size: 12px;
                border: none;
                position: relative;
                height: 28px;
                line-height: 30px;
                padding-left: 28px;
                width: 100%;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;

                @extend .font-bold;

                &::before {
                    position: absolute;
                    top: 0;
                    left: 8px;
                    content: '\E120';

                    @extend .font-icon;

                    font-size: 14px;
                    text-align: center;
                }
            }

            > .ui-panel.scripts-order {
                border: 1px solid $bcg-darker;

                &.disabled {
                    opacity: 0.5;
                }

                > .content {
                    > .dragPlaceholder {
                        margin-bottom: 1px;
                        background-color: $bcg-dark;
                        border: 4px solid $text-active;

                        &:last-child {
                            margin-bottom: 0;
                        }
                    }

                    > .asset {
                        border-bottom: 1px solid $bcg-darker;

                        &:last-child {
                            border-bottom: none;
                        }

                        &.disabled {
                            > .ui-header {
                                &:hover {
                                    background-color: $bcg-dark;

                                    > .title {
                                        text-decoration: none;
                                    }
                                }

                                > .handle {
                                    display: none;
                                }
                            }
                        }

                        > .ui-header {
                            padding-left: 0;
                            background-color: $bcg-dark;
                            cursor: pointer;

                            &:hover {
                                background-color: $bcg-darkest;

                                > .title {
                                    text-decoration: underline;
                                }
                            }

                            > .title {
                                padding: 0 8px;
                                color: $text-active;
                            }

                            > .number {
                                float: right;
                                margin-right: 8px;
                                color: $text-dark;

                                &::before {
                                    content: '#';
                                }
                            }

                            > .handle {
                                float: left;
                                width: 12px;
                                height: 24px;
                                margin: 4px 2px;
                                cursor: move;

                                @extend .noSelect;

                                $color: color.mix($text-darkest, $bcg-primary, 50%);
                                $size: 6px;
                                $inner-radius: 20%;
                                $outer-radius: 55%;

                                background: radial-gradient($color $inner-radius, transparent $outer-radius);
                                background-size: $size $size;

                                &:hover {
                                    $color: $text-primary;

                                    background: radial-gradient($color $inner-radius, transparent $outer-radius);
                                    background-size: $size $size;
                                }
                            }
                        }
                    }
                }
            }

            .ui-button.audio-play {
                @extend .font-icon;

                float: left;
                width: 26px;
                height: 26px;
                line-height: 26px;
                text-align: center;
                flex-shrink: 0;
                margin: 0 0 0 4px;
                padding: 0;
                font-size: 14px;

                &.active {
                    color: $text-active;
                    background-color: $bcg-darkest;
                }
            }

            .ui-progress.audio-timeline {
                float: left;
                flex-grow: 1;
                width: calc(100% - 42px);
                margin: 11px 0 0 8px;
                height: 4px;
            }

            .ui-button.loading-order {
                line-height: 20px;
                font-size: 12px;
            }

            .ui-label.no-data {
                line-height: 24px;
                height: 24px;
            }

            .ui-list.source-textures {
                > .ui-list-item {
                    position: relative;

                    > .ui-button.download {
                        @extend .font-icon;

                        position: absolute;
                        display: block;
                        top: 0;
                        right: 0;
                        width: 22px;
                        height: 22px;
                        line-height: 22px;
                        margin: 0;
                        padding: 0;
                        border: none;
                        font-size: 16px;
                        text-align: center;
                    }
                }
            }
        }

        .ui-panel.components-scripts > .content {
            > .ui-panel.component-script {
                &:first-child {
                    > .ui-header > .move-up {
                        visibility: hidden;
                    }
                }

                &:last-child {
                    > .ui-header > .move-down {
                        visibility: hidden;
                    }
                }
            }
        }

        .ui-panel.component-script {
            border-top: 1px solid $bcg-darker;
            border-left: 1px solid $bcg-darker;
            border-right: 1px solid $bcg-darker;

            &:last-child {
                border-bottom: 1px solid $bcg-darker;
            }

            > .ui-header {
                background-color: $bcg-dark;
                overflow: hidden;
                height: 32px;
                line-height: 32px;

                > .title {
                    max-width: calc(100% - 128px);

                    > .link {
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: block;
                        color: $text-active;
                        cursor: pointer;

                        &:hover {
                            text-decoration: underline;
                        }
                    }
                }

                > .move-down,
                > .move-up,
                > .refresh,
                > .remove {
                    float: right;
                    width: 32px;
                    height: 32px;
                    line-height: 32px;
                    margin: 0;
                    padding: 0;
                    background-color: transparent;
                    border: none;

                    @extend .font-icon;

                    font-size: 14px;
                    text-align: center;

                    &:hover {
                        color: $text-active;
                        background-color: #20292b;
                    }
                }

                > .refresh {
                    &::after {
                        content: '\E128';
                    }
                }

                > .move-up::after {
                    content: '\E161';
                }

                > .move-down {
                    &::after {
                        content: '\E163';
                    }
                }

                > .remove {
                    &:hover {
                        color: #d34141;
                    }

                    &::after {
                        content: '\E124';
                        font-weight: 200;
                    }
                }
            }

            > .content {
                padding: 0 3px;
            }
        }
    }

    .ui-label.asset-loading-error {
        display: block;
        text-align: center;
        font-weight: 100;
        font-size: 12px;
        color: #f66;

        &.hidden {
            display: none;
        }
    }

    .ui-panel.batching {
        > .content {
            padding-top: 8px;
        }

        .ui-panel.batch-group {
            margin-bottom: 2px;
            transition: none;

            > .ui-header > .title {
                width: calc(100% - 32px);
            }

            > .content {
                padding-top: 8px 6px;
                transition: none;
            }

            .ui-text-field.error {
                border-color: #fb222f;
            }

            .remove {
                @extend .font-icon;

                float: right;
                width: 32px;
                height: 32px;
                line-height: 32px;
                margin: 0;
                padding: 0;
                border: none;
                font-size: 14px;
                text-align: center;
                background-color: transparent;

                &:hover {
                    background-color: $bcg-darkest;
                }

                &::after {
                    content: '\E124';
                    font-weight: 200;
                }
            }
        }
    }

    .ui-panel.localization {
        > .content {
            .add-locale {
                margin-bottom: 10px;

                &.error {
                    outline: 1px solid #fb222f;
                }
            }

            .ui-panel.locale {
                margin-bottom: 10px;

                > .ui-header {
                    text-transform: initial;

                    > .ui-button.remove {
                        float: right;
                        border-color: transparent;
                        background: transparent;

                        @extend .font-icon;
                    }
                }

                > .content {
                    border: 1px solid $bcg-dark;
                }
            }
        }
    }
}

.ui-checkbox.tick {
    width: 14px;
    height: 14px;
    overflow: hidden;

    &.null {
        &::after {
            color: color.mix($bcg-primary, $text-darkest, 50%);
            left: 0;
        }

        &:hover::after {
            color: $text-primary;
        }
    }

    &::after {
        @extend .font-icon;

        position: absolute;
        margin: 0;
        content: none;
        width: 12px;
        height: 12px;
        line-height: 13px;
        font-weight: bold;
        font-size: 11px;
        text-align: center;
        left: 0;
        top: 0;
        border-radius: 0;
        background-color: transparent;
        transition: none;
    }

    &.null {
        &::after {
            @extend .font-regular;

            content: '?';
            color: $text-dark;
            font-weight: bold;
            background-color: transparent;
        }

        &:hover {
            &::after {
                background-color: transparent;
            }
        }
    }

    &:hover {
        &.checked::after {
            @extend .font-icon;

            content: '\E133';
            color: $text-primary;
            background-color: color.mix($text-dark, $bcg-darkest, 50%);
        }
    }

    &.checked {
        background-color: $text-dark;

        &::after {
            content: '\E133';
            color: $bcg-dark;
        }
    }
}

.viewport {
    @extend .noSelect;

    > .camera-preview {
        display: none;
        position: absolute;
        top: 41px;
        left: 4px;
        width: 256px;
        height: 196px;
        border: 2px solid $text-primary;

        &.active {
            display: block;
        }

        &.clickable {
            cursor: pointer;

            &:hover {
                border-color: $text-active;
            }
        }

        > .lock {
            position: absolute;
            top: 0;
            right: 0;
            width: 24px;
            height: 24px;
            line-height: 26px;
            padding: 0;
            margin: 0;
            border: none;
            border-radius: 0;
            color: rgba($text-primary, 0.75);
            background-color: rgba($bcg-darker, 0.5);

            &.active {
                color: $text-active;
                box-shadow: none;

                &::before {
                    content: '\E341';
                }
            }

            &:hover {
                color: $text-primary;
                background-color: rgba($bcg-darker, 0.75);
            }
        }
    }
}

.ui-panel.files {
    > .content {
        background-color: $bcg-darker;
    }
}

.assets-drop-border {
    display: none;
    position: fixed;
    width: auto;
    height: auto;
    z-index: 4;
    margin-top: -1px;
    margin-left: -1px;
    border: 4px solid #f60;
    pointer-events: none;

    &.active {
        display: block;
    }
}

@keyframes task-background {
    from { background-position: 0 0; }
    to { background-position: 24px 0; }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.pcui-container.top-controls {
    position: absolute;
    top: 4px;
    right: 4px;
    background-color: transparent;

    > .pcui-button.expand {
        float: right;
        width: 33px;
        height: 33px;
        line-height: 33px;
        margin: 0 2px 0 0;
        padding: 0;
        border: none;
        border-radius: 0;

        @extend .font-icon;

        font-size: 16px;
        text-align: center;
        color: rgba($text-primary, 0.75);
        background-color: rgba($bcg-darker, 0.5);

        &:hover {
            color: $text-primary;
            background-color: rgba($bcg-darker, 0.75);
            box-shadow: none;
        }

        &.icon.active {
            color: $text-primary;
            background-color: $text-active;
        }
    }

    > .pcui-container.render {
        justify-content: center;
        float: right;
        height: 33px;
        margin: 0 2px 0 0;
        font-size: 12px;
        background-color: rgba($bcg-darker, 0.5);
        cursor: pointer;

        &:hover {
            background-color: rgba($bcg-darker, 0.75);

            > .pcui-label {
                color: $text-primary;
            }
        }

        > .pcui-label {
            line-height: 33px;
            margin: 0 2px 0 0;
            padding: 0 10px;
            max-width: 200px;
            width: fit-content;
            color: rgba($text-primary, 0.75);

            &::before {
                float: left;

                @extend .font-icon;

                content: '\E188';
                margin-right: 7px;
                font-size: 14px;
            }

            &.wireframe::before {
                content: '\E187';
            }
        }

        > .pcui-container.render-options {
            position: absolute;
            padding: 10px;
            top: 33px;
            right: 0;
            text-align: start;
            min-width: 150px;
            max-height: 300px;
            overflow: hidden auto;
            background-color: rgba($bcg-darker, .75);

            .pcui-container {
                flex-direction: row;
                line-height: 22px;
                width: 100%;
                background: transparent;

                .pcui-boolean-input {
                    margin: 7px 3px 3px;
                    vertical-align: text-bottom;
                }

                .pcui-radio-button {
                    align-self: center;
                    height: 16px;
                    margin: 0 3px 0 2px;
                    width: 16px;
                    flex-shrink: 0;
                }

                .pcui-label {
                    margin: 3px;
                    max-width: 200px;
                    min-height: 20px;
                    word-wrap: break-word;
                    white-space: pre-wrap;
                    vertical-align: bottom;
                }
            }

            .divider {
                height: 3px;
                background-color: rgba($bcg-darker, .75);
                margin: 5px 0;
            }
        }
    }

    > .pcui-container.camera {
        justify-content: center;
        float: right;
        height: 33px;
        margin: 0 2px 0 0;
        font-size: 12px;
        background-color: rgba($bcg-darker, 0.5);
        cursor: pointer;

        &:hover {
            background-color: rgba($bcg-darker, 0.75);

            > .pcui-label {
                color: $text-primary;
            }
        }

        > .pcui-label {
            line-height: 33px;
            margin: 0 2px 0 0;
            padding: 0 10px;
            max-width: 200px;
            width: fit-content;
            color: rgba($text-primary, 0.75);

            &::before {
                float: left;

                @extend .font-icon;

                content: '\E212';
                margin-right: 7px;
                font-size: 14px;
            }
        }

        > .pcui-container.camera-options {
            position: absolute;
            padding: 10px;
            top: 33px;
            right: 0;
            text-align: start;
            min-width: 150px;
            max-height: 300px;
            overflow: hidden auto;
            background-color: rgba($bcg-darker, .75);

            .pcui-container {
                flex-direction: row;
                line-height: 22px;
                width: 100%;
                background: transparent;

                .pcui-boolean-input {
                    margin: 7px 3px 3px;
                    vertical-align: text-bottom;
                }

                .pcui-radio-button {
                    align-self: center;
                    height: 16px;
                    margin: 0 3px 0 2px;
                    width: 16px;
                    flex-shrink: 0;
                }

                .pcui-label {
                    margin: 3px;
                    max-width: 200px;
                    min-height: 20px;
                    word-wrap: break-word;
                    white-space: pre-wrap;
                    vertical-align: bottom;
                }
            }

            .divider {
                height: 3px;
                background-color: rgba($bcg-darker, .75);
                margin: 5px 0;
            }
        }
    }

    > .launch {
        float: right;
        position: relative;
        background-color: transparent;

        &:not(.disabled):hover {
            > .pcui-button {
                color: $text-primary;
                background-color: $text-active;
            }
        }

        > .pcui-button {
            width: 83px;
            height: 33px;
            line-height: 33px;
            margin: 0;
            padding: 0;
            border: none;
            border-radius: 0;

            @extend .font-icon;

            font-size: 20px;
            text-align: center;
            color: rgba($text-primary, 0.75);
            background-color: rgba($bcg-darker, 0.5);
            display: flex;
            align-items: center;
            padding-left: 8px;

            > span {
                font-family: 'Proxima Nova Regular';
                font-size: 12px;
            }
        }

        .pcui-container.options {
            position: absolute;
            top: 33px;
            right: 0;
            margin: 0;
            padding: 5px;
            list-style: none;
            background-color: rgba($bcg-darker, 0.75);

            .pcui-boolean-input:not(.pcui-boolean-input-ticked) {
                background-color: #20292b;
            }

            .pcui-label {
                vertical-align: top;
                font-size: 12px;
            }

            .pcui-container {
                @extend .noSelect;

                background: transparent;
                width: 200px;
                cursor: pointer;
                margin: 2px 0;

                &:has(.pcui-button):hover {
                    .pcui-button {
                        color: $text-active;
                    }
                }
            }


            .pcui-button {
                width: 100%;
                border: 0;
                padding: 0;
                margin: 0;
                margin-left: 5px;
                background-color: transparent;
                font-size: 20px;
                text-align: left;

                > span {
                    font-family: 'Proxima Nova Regular';
                    font-size: 12px;
                    vertical-align: middle;
                }

                &:hover {
                    box-shadow: none;
                }
            }

            .pcui-divider {
                cursor: default;
            }
        }
    }
}

.pcui-container.whoisonline {
    position: absolute;
    bottom: 34px;
    left: 246px;
    background-color: transparent;
    padding: 2px;
    transition: left 100ms;

    &.chat-minified {
        left: 106px;
    }

    &.no-chat {
        left: 2px;
    }

    &.expanded {
        bottom: 2px;
        left: 2px;
        transition: none;
    }

    > a {
        position: relative;
        display: block;
        margin-right: 4px;
        float: left;
        background-color: $bcg-darkest;

        > img {
            display: block;
            width: 28px;
            height: 28px;
            margin: 2px;
        }

        &::after {
            content: '\00a0';
            position: absolute;
            right: 2px;
            bottom: 2px;
            width: 6px;
            height: 6px;
            background: inherit;
        }
    }
}

.pcui-panel.chat-widget {
    position: absolute;
    bottom: 36px;
    left: 4px;
    width: 240px;
    height: 192px;

    &.pcui-collapsed {
        width: 100px;

        > .pcui-panel-header {
            color: $text-secondary;

            &::before {
                content: '\E233';
                color: $text-secondary;
            }

            > .typers {
                display: none;
            }

            > .pcui-button {
                display: none;
            }
        }
    }

    &.notify {
        > .pcui-panel-header {
            &::after {
                color: $text-active;
            }

            > .title {
                color: $text-primary;
            }
        }
    }

    > .pcui-panel-header {
        // header collapsible hover state
        &:hover {
            color: $text-primary;

            &::before {
                color: $text-primary;
            }
        }

        &::before {
            content: '\E233';
        }

        > .typers {
            float: right;
            max-width: 132px;
            padding-right: 4px;
            font-size: 10px;
            text-overflow: ellipsis;
            order: 0;
            overflow: hidden;
            color: $text-secondary;

            > .single,
            > .double,
            > .multiple {
                display: none;

                &.active {
                    display: block;
                }

                > .user {
                    font-weight: bold;
                }
            }
        }

        > .notifications {
            border-radius: 0;
            color: $text-darkest;
            float: right;
            font-size: 18px;
            order: 1;
            overflow: initial;
            width: 32px;
            height: 32px;

            &.active {
                color: $text-secondary;
            }

            &:hover {
                color: $text-primary;
                background-color: $bcg-darkest;
                box-shadow: none;
            }
        }

        > .number {
            display: none;
            float: right;
            margin-right: 4px;
            padding: 0 6px;
            height: 18px;
            line-height: 18px;
            border-radius: 9px;
            pointer-events: none;

            &.notify {
                display: block;
                color: $text-primary;
                background-color: $text-active;
            }

            &.typing {
                display: block;
                color: $text-primary;
            }
        }
    }

    > .pcui-panel-content {
        height: 160px;

        > .messages {
            height: 124px;
            overflow-x: hidden;
            padding-bottom: 4px;
            user-select: text;
            width: 240px;
            word-break: break-word;

            > .divider {
                background-color: $bcg-darker;
                margin: 4px 8px;
                height: 1px;
            }

            > .message + .message.multi {
                margin-top: -4px;
            }

            > .message.multi + .message.multi {
                margin-top: 0;
            }

            > .message {
                margin: 4px;
                padding-left: 18px;
                line-height: 14px;
                font-size: 12px;

                &.multi {
                    margin: 0 4px;
                }

                > img {
                    vertical-align: text-bottom;
                    margin-right: 4px;
                    margin-left: -18px;

                    @extend .noSelect;
                }

                > span {
                    vertical-align: text-top;

                    &.username {
                        font-weight: bold;
                        color: $text-primary;
                    }
                }
            }

            > .system {
                margin: 4px;
                line-height: 12px;
                font-size: 12px;
                font-weight: bold;
                color: $text-active;
            }
        }

        > .pcui-input-element {
            border: none;
            height: 32px;
            margin: 0;
            width: 240px;

            &.pcui-focus,
            &:hover {
                box-shadow: none;
            }

            &::after {
                right: auto;
                left: 0;
                line-height: 32px;
                width: 32px;
                text-align: center;
                padding: 0;
            }

            &.not-empty {
                padding: 0;
                content: '';
                background-color: $bcg-darkest;

                &::after {
                    content: '';
                }

                > .clear {
                    display: block;
                }

                > input {
                    color: $text-primary;
                    width: calc(100% - 40px);
                }
            }

            > input {
                padding: 0 8px;
            }

            > .clear {
                display: none;
                position: absolute;
                top: 0;
                right: 0;
                width: 32px;
                height: 32px;
                line-height: 32px;
                color: #d34141;

                @extend .font-icon;

                font-size: 18px;
                font-weight: bold;
                text-align: center;
                cursor: pointer;
            }
        }
    }
}

.pcui-container.widget-title {
    position: absolute;
    top: 4px;
    left: 4px;
    padding: 0;
    background-color: transparent;

    > .project-name,
    > .scene-name,
    > .branch-name,
    > .scene-list {
        height: 33px;
        min-height: 33px;
        line-height: 34px;
        padding: 0 10px;
        font-size: 12px;
        margin: 0 2px 0 0;
        color: rgba(#fff, 0.75);
        background-color: rgb(41 53 56 / 50%);
        cursor: pointer;

        &:hover,
        &.active {
            background-color: rgb(41 53 56 / 75%);
            color: #fff;
        }

        &::before {
            @extend .font-icon;

            font-size: 14px;
            margin-right: 7px;
            float: left;
            line-height: 34px;
        }
    }

    > .project-name::before {
        content: '\E140';
        margin-right: 0;
    }

    > .scene-name::before {
        content: '\E134';
        margin-right: 0;
    }

    > .branch-name::before {
        content: '\E399';
    }

    > .scene-list::before {
        content: '\E147';
    }
}

.ui-panel.loading-screen {
    .remove {
        position: absolute;
        width: 11px;
        height: 24px;
        top: 0;
        right: 10px;

        @extend .font-icon;

        text-align: center;
        border: none;
        color: #5b7073;
        background-color: transparent;

        &:hover {
            color: #d34141;
        }

        &::after {
            content: '\E124';
            font-weight: 200;
        }

        &.not-visible {
            visibility: hidden;
        }
    }

    > .content {
        > .ui-panel > .content {
            padding: 0;
        }
    }
}

.ui-panel.override-material {
    > .content {
        padding: 0 !important;
    }

    .ui-button.remove {
        @extend .font-icon;

        line-height: 66px;
        height: 66px;
        width: 40px;
        padding: 0;
        font-size: 14px;
        text-align: center;
    }
}

.ui-overlay.new-script {
    z-index: 110;

    > .content {
        width: 400px;
        max-height: 100px;
        height: auto;
        padding: 10px 20px;
        left: calc(50% - 200px);
        background-color: $bcg-dark;

        > .ui-panel > .content {
            background-color: $bcg-dark;

            > .ui-text-field {
                width: 100%;
                background-color: $bcg-darker;
                margin-top: 8px;
                height: 32px;
                line-height: 32px;

                &.active,
                &:hover,
                &:focus,
                &.focus {
                    background-color: $bcg-darkest;
                }
            }

            > .ui-label {
                background-color: transparent;
            }

            > .ui-label.action {
                display: block;
            }

            > .ui-label.error {
                color: #fb222f;
                font-size: 12px;
                position: absolute;
                top: 37px;
                right: 0;

                @extend .font-bold;
            }
        }
    }
}

.ui-overlay.script-priorities {
    > .content {
        width: 400px;
        height: auto;
        top: 25%;
        left: calc(50% - 200px);
        padding: 2px;

        > .ui-panel {
            overflow-y: scroll;
            max-height: 200px;
        }

        .ui-list {
            margin-right: 0;
        }

        .ui-label.title {
            @extend .font-bold;
        }

        .ui-label.description {
            font-size: 0.8em;
        }

        .ui-button.add-script {
            display: block;
            text-align: center;

            &::before {
                content: '\E120';
                padding-right: 8px;

                @extend .font-icon;
            }
        }
    }

    .ui-list-item {
        height: 32px;
        padding-right: 0;
        line-height: 32px;
    }

    .ui-button.move-up,
    .ui-button.move-down,
    .ui-button.remove {
        float: right;
        width: 32px;
        height: 32px;
        line-height: 30px;
        margin: 0;
        padding: 0;
        background-color: transparent;
        border: none;

        @extend .font-icon;

        font-size: 16px;
        text-align: center;

        &:hover {
            color: $text-active;
            background-color: #20292b;
        }
    }

    .move-up::after {
        content: '\E161';
    }

    .move-down {
        line-height: 32px;

        &::after {
            content: '\E163';
        }
    }

    .remove::after {
        content: '\E124';
        font-weight: 200;
    }

    .not-visible {
        visibility: hidden;
    }
}

.ui-panel.help-howdoi {
    background-color: rgb(41 53 56 / 50%);
    padding: 0;
    height: 33px;
    line-height: 33px;
    margin: 0;
    position: absolute;
    top: 4px;

    > .content {
        > .ui-text-field {
            background-color: transparent;
            border: none;
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;

            &::before {
                @extend .font-icon;

                font-size: 14px;
                content: '\E129';
                line-height: 34px;
                color: $text-primary;
                opacity: 0.5;
                vertical-align: top;
                padding-left: 10px;
            }

            > input {
                background-color: transparent;
                margin: 0;
                padding: 0 10px;
                color: $text-primary;
                width: calc(100% - 50px);

                @extend .font-regular;

                &::placeholder {
                    color: $text-primary;
                    opacity: 0.75;
                }
            }

            &.focus {
                background-color: $bcg-darkest;

                > input {
                    background-color: $bcg-darkest;
                }

                border-bottom: 1px solid $text-active;
            }
        }

        > .close {
            position: absolute;
            right: 18px;
            top: 4px;
            padding: 0;
            margin: 0;
            font-size: 12px;
            background-color: transparent;
            color: $text-primary;
            border-color: transparent;
            opacity: 0.5;

            @extend .noSelect;

            &:hover {
                opacity: 1;
            }

            > .font-icon {
                display: block;
                position: absolute;
                top: -1px;
                right: -12px;
            }
        }

        > .ui-menu {
            position: initial;

            > .inner {
                position: initial;
                width: 100%;
                max-height: 6.5 * 33px;
                overflow: hidden auto;

                > .ui-menu-item {
                    width: 100%;

                    &:hover > .title {
                        background-color: transparent;
                    }

                    &.focused > .title {
                        background-color: $text-darkest;
                    }

                    > .title {
                        font-size: 12px;
                        color: $text-primary;
                        width: 100%;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }
            }
        }
    }
}

.pcui-overlay.help-howdoi {
    > .pcui-overlay-content {
        background-color: #fff;
        position: relative;
        width: 400px;

        > .pcui-container {
            padding: 20px;

            > .pcui-label {
                color: $text-darkest;
                line-height: 22px;
                margin: 0;
                margin-bottom: 30px;
                white-space: normal;

                h2 {
                    color: $text-active;

                    @extend .font-bold;

                    font-size: 16px;
                    margin-top: 0;
                    margin-bottom: 10px;
                }

                .font-icon {
                    font-size: 16px;
                }

                img,
                iframe {
                    border: none;
                    max-width: 100%;
                }

                button,
                a.docs {
                    position: absolute;
                    bottom: 20px;

                    @extend .font-bold;

                    background-color: $bcg-darkest;
                    border: none;
                    color: $text-primary;
                    height: 30px;
                    line-height: 30px;
                    font-size: 12px;
                    padding: 0;
                    margin: 0;
                    cursor: pointer;

                    &:active,
                    &:focus {
                        outline: none;
                    }
                }

                .close {
                    width: 80px;
                    left: 20px;
                    text-align: center;

                    &:hover {
                        background-color: $text-active;
                        border-color: $text-active;
                    }
                }

                a.docs {
                    position: absolute;
                    bottom: 20px;
                    left: 118px;
                    display: block;
                    padding: 0 10px;
                    text-decoration: none;
                    background-color: $text-active;
                    border-color: $text-active;

                    &::after {
                        display: inline-block;
                        position: absolute;
                        vertical-align: top;
                        top: 0;
                        left: 100%;
                        width: 30px;
                        height: 30px;
                        text-align: center;
                        content: '\E166';

                        @extend .font-icon;

                        font-size: 20px;
                        background-color: color.adjust($text-active, $alpha: -0.5);
                    }

                    &:hover::after {
                        background-color: $text-active;
                    }
                }
            }
        }
    }
}

.pcui-overlay.help-controls {
    > .pcui-overlay-content {
        z-index: 1;
        width: 512px;
        height: 640px;

        > .header {
            background-color: $bcg-darker;

            > .pcui-label {
                margin: 0;
                padding-left: 16px;
                font-size: 16px;
                line-height: 48px;

                &::before {
                    @extend .font-icon;

                    content: '\E136';
                    font-size: 20px;
                    margin-right: 8px;
                }
            }

            > .pcui-button {
                float: right;
                margin: 0;
                border: none;
                border-radius: 0;
                width: 48px;
                height: 48px;
                line-height: 48px;
                font-size: 20px;
                background-color: transparent;

                &:hover {
                    color: $text-active;
                    background-color: $bcg-darkest;
                    box-shadow: none;
                }
            }
        }

        > img.top {
            display: block;
            padding: 0 16px;
            background-color: $bcg-darker;
        }

        > .container {
            height: 400px;
            overflow: hidden auto;

            > .row {
                height: 38px;
                padding-right: 4px;
                border-bottom: 1px solid $bcg-darker;
                overflow: hidden;

                &:last-child {
                    border-bottom: none;
                }

                > .buttons {
                    float: left;
                    min-width: 128px;
                    margin: 5px 16px 5px 5px;
                    white-space: nowrap;

                    > .button {
                        float: left;
                        margin: 2px;
                        padding: 0 12px;
                        line-height: 24px;
                        font-size: 12px;
                        border-radius: 2px;
                        color: $text-primary;
                        background-color: $bcg-darker;
                    }

                    > .divider {
                        float: left;
                        line-height: 28px;
                        font-size: 12px;
                        margin: 0 2px;

                        &.plus {
                            margin: 0 -1px;
                        }

                        &.or {
                            margin: 0 4px;
                        }
                    }
                }

                > .title {
                    line-height: 38px;

                    > .icon {
                        @extend .font-icon;

                        float: right;
                        margin: 0 8px;
                        font-size: 18px;
                    }
                }
            }
        }
    }
}

.pcui-overlay.demo {
    .pcui-overlay-content {
        width: 536px;
        height: auto;
        background-color: #fff;
        z-index: 1;

        > .pcui-container {
            > .pcui-label {
                display: block;
                padding: 0;
                margin: 0 0 28px;
            }

            > .header {
                font-size: 16px;
                color: $text-active;
                padding-left: 28px;

                &::before {
                    display: block;
                    content: ' ';
                    background-image: url('https://playcanvas.com/static-assets/images/bcg_primary.jpg');
                    background-repeat: no-repeat;
                    background-position: center center;
                    background-size: cover;
                    height: 110px;
                    margin-left: -28px;
                    margin-bottom: 28px;
                }
            }

            > .main {
                display: block;
                line-height: 28px;
                color: $text-darkest;
                font-size: 18px;
                white-space: normal;
                padding: 0 28px;

                @extend .font-bold;
            }

            > .close {
                @extend .font-bold;

                font-size: 12px;
                background-color: #4a5a5d;
                width: 80px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                color: #fff;
                margin: 0 0 28px 28px;
                border-radius: 0;
                box-shadow: none;

                &:hover {
                    background-color: $text-active;
                    border-color: $text-active;
                    color: $text-primary;
                }
            }
        }
    }
}

.connection-overlay {
    > .content {
        width: 400px;
        left: calc(50% - 200px);
        height: 64px;
        top: calc(50% - 32px);

        > .connection-icon {
            width: 64px;
            height: 64px;
            line-height: 64px;

            @extend .font-icon;

            font-size: 34px;
            font-weight: 100;
            text-align: center;
            display: inline-block;

            &.error::before {
                content: '\E218';
            }
        }

        > .connection-content {
            padding-left: 20px;
            width: 400px - 64px - 20px;
            display: inline-block;
            vertical-align: super;
        }
    }
}

.ui-overlay.bubble {
    z-index: 1000;

    &.arrow-left {
        > .content {
            margin-left: 48px;
            margin-top: -28px;

            &::after {
                content: '';
                width: 0;
                height: 0;
                position: absolute;
                top: 16px;
                left: -32px;
                border: 16px solid transparent;
                border-right-color: #fff;
            }
        }
    }

    &.arrow-right {
        > .content {
            margin-top: -28px;
            margin-left: -520px;

            &::after {
                content: '';
                width: 0;
                height: 0;
                position: absolute;
                top: 16px;
                right: -32px;
                border: 16px solid transparent;
                border-left-color: #fff;
            }
        }
    }

    &.arrow-bottom {
        > .content {
            margin-top: -16px;
            margin-left: -28px;

            &::after {
                content: '';
                width: 0;
                height: 0;
                position: absolute;
                bottom: -32px;
                left: 16px;
                border: 16px solid transparent;
                border-top-color: #fff;
            }
        }
    }

    &.arrow-top {
        > .content {
            margin-top: 48px;
            margin-left: -28px;

            &::after {
                content: '';
                width: 0;
                height: 0;
                position: absolute;
                top: -32px;
                left: 16px;
                border: 16px solid transparent;
                border-bottom-color: #fff;
            }
        }
    }

    &.arrow-top-right {
        > .content {
            margin-top: 48px;
            margin-left: -444px;

            &::after {
                content: '';
                width: 0;
                height: 0;
                position: absolute;
                top: -32px;
                right: 16px;
                border: 16px solid transparent;
                border-bottom-color: #fff;
            }
        }
    }

    &.arrow-bottom-right {
        > .content {
            margin-top: -16px;
            margin-left: -444px;

            &::after {
                content: '';
                width: 0;
                height: 0;
                position: absolute;
                bottom: -32px;
                right: 16px;
                border: 16px solid transparent;
                border-top-color: #fff;
            }
        }
    }

    > .overlay {
        background-color: transparent;
    }

    > .content {
        width: 480px;
        height: auto;
        left: calc(50% - 240px);
        background-color: #fff;
        transition: none;

        > .ui-panel {
            background-color: transparent;

            > .ui-header {
                @extend .font-bold;

                background-color: transparent;
                font-size: 18px;
                height: auto;
                line-height: normal;
                padding: 0;
                overflow: hidden;
                color: $text-active;

                > .title {
                    padding: 28px;
                    padding-bottom: 0;
                }
            }

            > .content {
                padding: 28px;

                > .ui-label {
                    color: $text-darkest;
                    margin: 0;

                    > .font-icon {
                        color: $text-darkest;
                        font-size: 20px;
                    }

                    img {
                        max-width: 100%;
                    }
                }
            }
        }

        > .ui-button.next {
            margin: 0 0 28px 28px;
            padding: 0 32px;
            line-height: 32px;
            font-size: 12px;

            @extend .font-bold;

            text-transform: uppercase;
            color: $text-primary;
            background-color: $text-darkest;
            border: none;

            &:hover {
                color: #fff;
                background-color: $text-active;
            }
        }
    }
}

.picker-script-create.center {
    > .content {
        width: 288px;
        height: auto;
        left: calc(50% - 144px);
        top: calc(50% - 32px);
        padding: 16px;
        transition: none;

        > .text {
            display: block;
            margin-top: 0;
        }

        > .ui-text-field {
            display: block;
            width: calc(100% - 8px);
        }

        > .validate {
            position: absolute;
            top: 16px;
            right: 16px;
            margin: 0;
            font-size: 12px;
            color: #f30;
        }
    }
}

.picker-color {
    &.c-1 > .content {
        > .pick-opacity {
            display: block;
        }

        > .fields > .field-r {
            display: block;
        }
    }

    &.c-2 > .content {
        > .fields > .field-hex {
            display: block;
        }
    }

    &.c-3 > .content {
        width: 298px;

        > .pick-rect {
            display: block;
        }

        > .pick-hue {
            display: block;
        }

        > .pick-opacity {
            display: none;
        }

        > .fields {
            > .field-g,
            > .field-b {
                display: block;
            }
        }
    }

    &.c-4 > .content {
        width: 320px;

        > .pick-opacity {
            display: block;
        }

        > .fields > .field-a {
            display: block;
        }
    }

    > .content {
        border: 1px solid #000;
        width: 320px;
        height: 162px;
        white-space: nowrap;
        transition: none;

        > .pick-rect {
            @extend .noSelect;

            position: relative;
            display: none;
            float: left;
            width: 146px;
            height: 146px;
            border: 1px solid #000;
            box-sizing: border-box;
            margin: 8px 0 8px 8px;
            background-color: #f00;
            cursor: crosshair;

            > .white {
                position: absolute;
                width: 144px;
                height: 144px;
                top: 0;
                left: 0;
                background: linear-gradient(to right, rgb(255 255 255 / 100%) 0%, rgb(255 255 255 / 1%) 100%);
            }

            > .black {
                position: absolute;
                width: 144px;
                height: 144px;
                top: 0;
                left: 0;
                background: linear-gradient(to bottom, rgb(0 0 0 / 1%) 0%, rgb(0 0 0 / 100%) 100%);
            }

            > .handle {
                position: absolute;
                top: 0;
                left: 0;
                width: 12px;
                height: 12px;
                margin: -7px 0 0 -7px;
                border: 1px solid #000;
                outline: 1px solid #fff;
            }
        }

        > .pick-hue {
            @extend .noSelect;

            position: relative;
            display: none;
            float: left;
            width: 14px;
            height: 146px;
            margin: 8px 0 8px 8px;
            border: 1px solid #000;
            box-sizing: border-box;
            cursor: crosshair;
            background: #000;
            background:
                linear-gradient(
                    to bottom,
                    rgb(255 0 0 / 100%) 0%,
                    rgb(255 255 0 / 100%) 16.67%,
                    rgb(0 255 0 / 100%) 33.33%,
                    rgb(0 255 255 / 100%) 50%,
                    rgb(0 0 255 / 100%) 66.67%,
                    rgb(255 0 255 / 100%) 83.33%,
                    rgb(255 0 0 / 100%) 100%
                );

            > .handle {
                position: absolute;
                top: 0;
                left: -3px;
                width: 16px;
                height: 4px;
                margin: -3px 0 0;
                border: 1px solid #000;
                outline: 1px solid #fff;
            }
        }

        > .pick-opacity {
            @extend .noSelect;

            position: relative;
            display: none;
            float: left;
            width: 12px;
            height: 144px;
            margin: 8px 0 8px 8px;
            border: 1px solid #000;
            cursor: crosshair;
            background: #000;
            background: linear-gradient(to bottom, #fff 0%, #000 100%);

            > .handle {
                position: absolute;
                top: 0;
                left: -3px;
                width: 16px;
                height: 4px;
                margin: -3px 0 0;
                border: 1px solid #000;
                outline: 1px solid #fff;
            }
        }

        > .fields {
            float: left;
            width: 106px;
            height: 154px;
            margin: 0 0 0 8px;
            padding: 4px;

            > .field {
                display: none;
                width: calc(106px - 6px);
            }
        }
    }
}

.picker-curve {
    > .content {
        border: 1px solid #000;
        width: 470px;
        background-color: transparent;
        transition: none;

        > .picker-curve-panel {
            height: 100%;
            font-size: 11px;

            > .picker-curve-header {
                padding: 5px 10px;

                > .content {
                    > .ui-button.picker-curve-toggle {
                        float: right;
                        text-align: center;
                        height: 24px;
                        line-height: 24px;
                        min-width: 24px;
                        margin: 3px 0;

                        &.active.first {
                            color: rgb(255 0 0);
                        }

                        &.active.second {
                            color: rgb(0 255 0);
                        }

                        &.active.third {
                            color: rgb(133 133 252);
                        }
                    }
                }
            }

            > .picker-curve-footer {
                padding: 5px 10px;

                > .content {
                    > .ui-number-field {
                        width: 143px;
                    }

                    > .ui-button {
                        @extend .font-icon;

                        font-size: 14px;
                        width: 32px;
                        height: 24px;
                        line-height: 24px;
                        padding: 0;
                        text-align: center;
                    }
                }
            }

            &.scroll {
                cursor: grabbing;
            }
        }
    }
}

.picker-gradient {
    > .content {
        width: 364px;

        > .picker-gradient-panel {
            height: 100%;
            font-size: 11px;

            > .picker-gradient-gradient {
                width: 346px;
                height: 28px;
                display: block;
                padding: 10px 10px 0;
            }

            > .picker-gradient-anchors {
                width: 346px;
                height: 28px;
                display: block;
                padding: 0 10px;
            }

            > .picker-gradient-footer {
                padding: 5px;

                > .content {
                    > .ui-number-field {
                        vertical-align: bottom;
                    }

                    > .ui-slider {
                        vertical-align: bottom;
                    }

                    > .ui-button {
                        @extend .font-icon;

                        vertical-align: bottom;
                    }
                }
            }

            > .color-panel {
                height: 156px;

                > .content {
                    > .color-rect {
                        margin: 5px 10px 10px;
                        width: 140px;
                        height: 140px;
                        cursor: crosshair;
                        position: relative;
                        float: left;
                    }

                    > .color-handle {
                        position: absolute;
                        width: 14px;
                        height: 14px;
                        border: 1px solid #000;
                        outline: 1px solid #fff;
                        pointer-events: none;
                    }

                    > .hue-rect,
                    > .alpha-rect {
                        margin: 5px 10px 10px 0;
                        width: 20px;
                        height: 140px;
                        cursor: crosshair;
                    }

                    > .hue-handle,
                    > .alpha-handle {
                        position: absolute;
                        width: 20px;
                        height: 4px;
                        border: 1px solid rgb(92 82 79);
                        outline: 1px solid #fff;
                        pointer-events: none;
                    }

                    > .fields {
                        display: inline-block;
                        margin: 3px 0 0;
                        width: 112px;
                        height: 145px;
                        vertical-align: top;

                        > .ui-number-field {
                            margin: 2px 0;
                            width: 162px;
                        }

                        > .ui-text-field {
                            margin: 2px 0;
                            width: 162px;
                        }
                    }
                }
            }
        }
    }
}

.pcui-label.cursor-tooltip {
    font-family: 'Lucida Console', Monaco, monospace;
    font-size: 10px;
    position: absolute;
    top: -26px;
    left: 8px;
    background-color: #181e20;
    padding: 0 6px;
    line-height: 18px;
}

.ui-panel.clips {
    > .content {
        padding-top: 8px;
    }

    .ui-panel.clip {
        margin-bottom: 2px;

        > .ui-header > .title {
            width: calc(100% - 32px);
        }

        > .content {
            padding: 8px 6px;
        }

        .remove {
            @extend .font-icon;

            float: right;
            width: 32px;
            height: 32px;
            line-height: 32px;
            margin: 0;
            padding: 0;
            border: none;
            font-size: 14px;
            text-align: center;
            background-color: transparent;

            &:hover {
                background-color: $bcg-darkest;
            }

            &::after {
                content: '\E124';
                font-weight: 200;
            }
        }
    }
}

.ui-menu.organization-dropdown {
    z-index: 10001;

    #organization-details {
        &::after {
            @extend .font-icon;

            content: '\E435';
            display: none;
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            margin: 0 10px;
        }

        &:hover::after {
            display: inline-block;
        }
    }

    #organization-delete {
        &:hover {
            background-color: #d34141;
        }

        & > .title:hover {
            background-color: transparent;
        }
    }
}

.ui-overlay.picker-project-cms {
    z-index: 10000;

    & > .content {
        position: absolute;
        left: 0;
        top: 0;
        height: 100vh;
        width: 100vw;

        & > .cms-root-panel {
            height: 100%;
            justify-content: center;
            align-items: center;

            & > .pcui-panel-header {
                position: relative;
                justify-content: center;
                width: 100%;

                & > .home-button {
                    position: absolute;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 32px;
                    left: 5px;
                    margin: 0;
                    opacity: 1;
                    background: linear-gradient(360deg, #f06531 -4.69%, #ffa468 125.79%), linear-gradient(0.36deg, #ff0 -151.33%, rgb(63 63 63 / 0%) 133.42%);
                    box-shadow: inset 0 0 6px rgb(255 252 0 / 50%);
                    height: 100%;
                    border-radius: initial;
                    color: $text-primary;

                    &:hover:not(.pcui-disabled) { filter: brightness(1.1); }
                }

                & > .pcui-panel-header-title {
                    width: fit-content;
                    flex: none;
                    margin: 0;
                }

                & > .header-utils {
                    position: absolute;
                    display: flex;
                    gap: 10px;
                    align-items: center;
                    right: 25px;

                    & > .import-button {
                        background: none;
                        border: none;
                        box-shadow: none;
                        cursor: pointer;
                    }

                    & > .new-project-button {
                        height: 24px;
                        line-height: 1em;
                        padding: 0 20px;
                        background-color: $text-active;
                        border: none;
                        color: #fff;
                        font-weight: 800;
                        margin-left: 0;

                        &:hover {
                            color: $text-active;
                            background-color: $text-primary;
                        }
                    }

                    & > .user-icon {
                        width: 24px;
                        height: 24px;
                        cursor: pointer;

                        &:hover { box-shadow: 0 0 5px rgba($text-active, 0.7); }
                    }
                }
            }

            & > .pcui-panel-content {
                height: 100%;
                width: 100%;
                display: flex;
                flex-direction: row;

                & > .cms-left-panel {
                    position: relative;
                    max-width: 300px;
                    min-width: 300px;
                    background-color: $bcg-darker;

                    & > .projects-toggle,
                    & > .organizations-toggle {
                        & > .pcui-panel-header {
                            background-color: $bcg-darkest;
                        }
                    }

                    & > .projects-toggle {
                        & > .pcui-panel-content {
                            display: flex;
                            flex-direction: column;
                            background-color: $bcg-darker;
                        }

                        .filter-button:last-child {
                            margin-bottom: 10px;
                        }

                        .filter-button {
                            display: flex;
                            align-items: center;
                            width: calc(100% - 4px);
                            padding: 15px 30px;
                            padding-left: 30px;
                            margin: 2px;
                            background-color: $bcg-darker;
                            border: none;
                            box-shadow: none;
                            border-radius: initial;

                            &::before {
                                font-size: 1.3em;
                            }
                        }
                    }

                    & > .organizations-toggle {
                        & > .pcui-panel-header {
                            $p: &;

                            span {
                                flex: none;
                                margin: 0;
                            }

                            & > .organization-add {
                                position: absolute;
                                display: inline-block;
                                right: 10px;
                                font-size: 1.2em;
                                border: none;
                                box-shadow: initial;
                                z-index: 1;

                                &:hover {
                                    color: $text-primary;
                                }
                            }
                        }

                        & > .pcui-panel-content {
                            position: relative;
                            background-color: $bcg-darker;

                            .organization-button,
                            .new-organization-button {
                                display: flex;
                                align-items: center;
                                width: calc(100% - 64px);
                                padding: 5px 30px;
                                margin: 2px;
                                background-color: $bcg-darker;
                                border: none;
                                box-shadow: none;
                                border-radius: initial;
                                cursor: pointer;

                                &::before {
                                    font-size: 1.3em;
                                }

                                & > .organization-icon {
                                    width: 16px;
                                }

                                &:hover {
                                    & > span {
                                        color: $text-primary;
                                    }
                                }
                            }

                            .organization-button > .dropdown {
                                @extend .font-icon;

                                position: absolute;
                                right: 0;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                height: 20px;
                                width: 20px;
                                padding: 0;
                                margin: 0 15px;
                                border: none;
                                box-shadow: initial;
                                background-color: $bcg-dark;
                                font-size: 10px;

                                &::before {
                                    height: 25px;
                                }

                                &.clicked {
                                    background-color: $bcg-darkest;
                                }
                            }
                        }
                    }

                    & > .misc-container {
                        position: absolute;
                        width: 100%;
                        bottom: 0;
                        left: 0;

                        & > .quick-links-container {
                            display: flex;
                            flex-direction: column;
                            gap: 5px;

                            .quick-link {
                                border: none;
                                box-shadow: none;
                                margin: 0;
                                background-color: $bcg-darker;
                                text-align: start;

                                &::after {
                                    @extend .font-icon;

                                    content: '\E435';
                                    display: none;
                                    position: absolute;
                                    right: 0;
                                    margin: 0 15px;
                                }

                                &:hover {
                                    background-color: $bcg-primary;

                                    &::after {
                                        display: inline-block;
                                    }
                                }
                            }
                        }

                        & > .upgrade-container {
                            position: relative;
                            display: flex;
                            gap: 5px;
                            flex-direction: column;
                            align-items: center;
                            justify-content: space-around;
                            width: calc(100% - 20px);
                            height: 94px;
                            min-height: 94px;
                            max-height: 94px;
                            padding: 10px 5px;
                            margin: 20px 5px;
                            background-color: $bcg-primary;

                            & > .upgrade-label {
                                @extend .font-regular;

                                font-weight: 900;
                                margin-bottom: 0;
                            }

                            & > .usage-bar-container {
                                position: relative;
                                display: block;
                                width: 100%;
                                height: 3px;
                                margin-bottom: 10px;
                                background-color: $bcg-darker;

                                & > .usage-bar {
                                    height: 100%;
                                    background-color: $text-primary;
                                }
                            }

                            & > .upgrade-button {
                                width: 100%;
                                margin: 0;
                                color: $bcg-darkest;
                                text-transform: uppercase;
                                font-weight: 900;
                                background-color: $text-primary;

                                &:hover {
                                    color: $text-active;
                                }
                            }
                        }
                    }
                }

                & > .cms-right-panel {
                    position: relative;
                    width: calc(100vw - 300px);

                    & > .progress-container {
                        position: relative;
                        width: 100%;
                        height: 5px;
                        transition: all 0.2s ease-in-out;

                        &.progress-container-expand {
                            margin-bottom: 20px;
                        }

                        & > .progress {
                            width: 100%;
                        }
                    }

                    & > .list-project-controls {
                        position: relative;
                        height: 30px;
                        display: flex;
                        padding: 15px 36px 0;

                        & > .search-project {
                            flex: 18;
                            margin: 0 6px 0 0;
                            height: 100%;

                            input {
                                width: calc(100% - 42px);
                                margin-left: 30px;
                            }

                            &::after {
                                @extend .font-regular;

                                font-size: 14px;
                                right: auto;
                                left: 28px;
                                line-height: 27px;
                            }

                            &::before {
                                @extend .font-icon;

                                content: '\E290';
                                position: absolute;
                                left: 0;
                                top: 2px;
                                display: flex;
                                width: 28px;
                                height: 28px;
                                align-items: center;
                                justify-content: center;
                            }
                        }

                        & > .sort-btn,
                        & > .layout-btn {
                            flex: 0.5;
                            margin-top: 0;
                            margin-bottom: 0;
                            border: none;
                            height: 100%;
                        }

                        & > .sort-btn {
                            flex: 0.7;

                            &::after {
                                @extend .font-icon;

                                margin-left: 3px;
                            }

                            &.closed::after { content: '\E159'; }
                            &.open::after { content: '\E157'; }
                        }

                        & > .layout-btn {
                            margin-right: 0;
                        }
                    }

                    & > .projects-container-list {
                        display: grid;
                        grid-template-columns: 1fr 1fr;
                        align-content: start;
                        justify-items: center;
                        margin: 25px;
                        gap: 15px;
                        width: calc(100% - 50px);
                        height: calc(100% - 100px);
                        overflow: hidden auto;

                        & > .project-container {
                            $p: &;

                            position: relative;
                            display: flex;
                            background-image: none !important;
                            background-color: $bcg-dark;
                            width: calc(100% - 16px);
                            height: 75px;
                            min-height: 75px;
                            max-height: 75px;
                            cursor: pointer;

                            &::after {
                                content: '';
                                position: absolute;
                                left: 0;
                                width: 0;
                                display: block;
                                height: 100%;
                                opacity: 0;
                                background: linear-gradient(89.93deg, rgba(#f60, 0.5) 0.5%, rgb(255 255 255 / 20%) 75.94%, transparent 94%);
                                transition: opacity 0.45s ease-in-out;
                                transition: width 0.3s ease-in-out;
                            }

                            &.noAccess {
                                .project-thumbnail { z-index: initial; }

                                &::before {
                                    content: '';
                                    display: block;
                                    position: absolute;
                                    width: 100%;
                                    height: 75px;
                                    background-color: $bcg-darker;
                                    filter: opacity(0.8);
                                    z-index: 2;
                                }
                            }

                            &.disabled {
                                .project-thumbnail { z-index: initial; }

                                &::before {
                                    @extend .font-icon;

                                    content: '\E326';
                                    color: $text-primary;
                                    left: 0;
                                    right: 0;
                                    display: flex;
                                    align-items: center;
                                    padding-left: 27px;
                                    position: absolute;
                                    width: calc(100% - 27px);
                                    height: 100%;
                                    background-color: $bcg-darker;
                                    filter: opacity(0.8);
                                    z-index: 2;
                                    cursor: pointer;
                                    transition: all 0.3s ease-in-out;
                                }
                            }

                            &.locked {
                                .project-thumbnail { z-index: initial; }
                                &:hover::before { color: $text-active; }

                                &::before {
                                    @extend .font-icon;

                                    content: '\E341';
                                    color: $text-primary;
                                    left: 0;
                                    right: 0;
                                    display: flex;
                                    align-items: center;
                                    padding-left: 27px;
                                    position: absolute;
                                    width: calc(100% - 27px);
                                    height: 100%;
                                    background-color: $bcg-darker;
                                    filter: opacity(0.8);
                                    z-index: 2;
                                    cursor: pointer;
                                    transition: all 0.3s ease-in-out;
                                }
                            }

                            &.currentlyOpen {
                                &::after {
                                    opacity: 1;
                                    width: 100% !important;
                                }

                                .project-thumbnail > .project-stats-container > .stat {
                                    color: $text-primary;
                                }

                                & > .project-name,
                                & > .project-last-edited {
                                    color: $text-primary;
                                }
                            }

                            &:hover:not(.noAccess, .currentlyOpen, .locked, .disabled) {
                                &::after {
                                    width: 100%;
                                    opacity: 1;
                                }

                                .project-thumbnail > .project-stats-container > .stat {
                                    color: $text-primary;
                                }

                                & > .project-name,
                                & > .project-last-edited {
                                    color: $text-primary;
                                }
                            }

                            .project-thumbnail-container {
                                & > .project-thumbnail {
                                    position: static;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    height: 60px;
                                    width: 60px;
                                    align-self: center;
                                    margin: 5px;
                                    background-position: center;
                                    background-size: contain;
                                    background-repeat: no-repeat;
                                    z-index: 1;

                                    & > .add-me-as-admin {
                                        @extend .font-regular;

                                        text-transform: uppercase;
                                        position: absolute;
                                        top: 50%;
                                        right: 5%;
                                        transform: translate(0, -50%);
                                        margin: 0;
                                        z-index: 3;
                                    }
                                }

                                & > .extended-settings-button {
                                    position: absolute;
                                    left: 50%;
                                    top: 50%;
                                    transform: translate(-50%, -50%);
                                    background: linear-gradient(186.19deg, #f60 4.89%, #ffa468 61.73%);
                                    border-radius: 50%;
                                    padding: 0;
                                    margin: 0;
                                    width: 45px;
                                    height: 45px;
                                    font-size: 0.8rem;
                                    border: none;
                                    box-shadow: initial;
                                    color: $text-primary;

                                    &:hover {
                                        filter: brightness(1.1);
                                    }
                                }
                            }

                            & > .project-name {
                                @extend .font-regular;

                                position: absolute;
                                left: 74px;
                                height: min-content;
                                z-index: 1;
                                transition: all 0.2s ease-in-out;
                            }

                            & > .project-last-edited {
                                @extend .font-regular;

                                position: absolute;
                                height: min-content;
                                left: 74px;
                                bottom: 0;
                                z-index: 1;
                                transition: all 0.2s ease-in-out;
                            }

                            & > .project-stats-container {
                                position: absolute;
                                left: 74px;
                                width: max-content;
                                top: 50%;
                                transform: translateY(-50%);

                                & > .stat {
                                    @extend .font-regular;

                                    transition: all 0.2s ease-in-out;

                                    &::before {
                                        @extend .font-icon;

                                        display: inline-block;
                                        margin-right: 5px;
                                    }
                                }

                                & > #forks-stat::before { content: '\E431'; }
                                & > #views-stat::before { content: '\E308'; }
                                & > #plays-stat::before { content: '\E180'; }
                            }
                        }
                    }

                    & > .projects-container-grid {
                        display: grid;
                        justify-content: space-between;
                        width: calc(100% - 50px);
                        height: calc(100% - 80px);
                        overflow: hidden auto;
                        margin: 25px;
                        grid-gap: 10px;
                        row-gap: 30px;
                        grid-template-columns: repeat(auto-fill, 200px);
                        grid-auto-rows: min-content;

                        & > .project-container {
                            position: relative;
                            display: flex;
                            align-items: center;
                            flex-direction: column;

                            &.currentlyOpen {
                                .project-thumbnail::after {
                                    height: 80%;
                                    opacity: 1;
                                }

                                &::after {
                                    height: 90%;
                                    opacity: 1;
                                }
                            }

                            &.noAccess {
                                cursor: pointer;

                                &::before {
                                    content: '';
                                    display: block;
                                    position: absolute;
                                    justify-self: center;
                                    width: 178px;
                                    height: 178px;
                                    background-color: $bcg-darker;
                                    filter: opacity(0.8);
                                    z-index: 2;
                                }
                            }

                            &.disabled {
                                &::before {
                                    @extend .font-icon;

                                    content: '\E326';
                                    font-size: 2em;
                                    color: $text-primary;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    position: absolute;
                                    justify-self: center;
                                    width: 178px;
                                    height: 178px;
                                    background-color: $bcg-darker;
                                    filter: opacity(0.8);
                                    z-index: 2;
                                    cursor: not-allowed;
                                    transition: all 0.3s ease-in-out;
                                }
                            }

                            &.locked {
                                &:hover::before { color: $text-active; }

                                &::before {
                                    @extend .font-icon;

                                    content: '\E341';
                                    font-size: 2em;
                                    color: $text-primary;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    position: absolute;
                                    justify-self: center;
                                    width: 178px;
                                    height: 178px;
                                    background-color: $bcg-darker;
                                    filter: opacity(0.8);
                                    z-index: 2;
                                    cursor: pointer;
                                    transition: all 0.3s ease-in-out;
                                }
                            }

                            &:hover:not(.noAccess, .currentlyOpen, .locked, .disabled) {
                                .project-thumbnail {
                                    transform: translate(0, -5px);
                                }

                                &::after {
                                    height: 90%;
                                    opacity: 1;
                                }
                            }

                            .project-thumbnail {
                                position: relative;
                                width: 100%;
                                max-width: 178px;
                                height: 178px;
                                align-self: center;
                                background-position: center;
                                background-size: contain;
                                background-repeat: no-repeat;
                                transition: all 0.25s ease-in-out;
                                z-index: 1;
                                cursor: pointer;

                                & > .add-me-as-admin {
                                    @extend .font-regular;

                                    text-transform: uppercase;
                                    position: absolute;
                                    top: 50%;
                                    left: 50%;
                                    transform: translate(-50%, -50%);
                                    margin: 0;
                                    z-index: 2;
                                }

                                &::after {
                                    content: '';
                                    display: block;
                                    background-image: linear-gradient(180deg, rgb(255 255 255 / 0%) 0%, rgb(255 102 0 / 70%) 128.11%);
                                    height: 0;
                                    width: 100%;
                                    position: absolute;
                                    left: 0;
                                    bottom: 0;
                                    opacity: 0;
                                    transition: all 0.35s ease-in-out;
                                }
                            }

                            .project-thumbnail-container {
                                position: relative;

                                & > .extended-settings-button {
                                    position: absolute;
                                    top: 0;
                                    left: 0;
                                    display: block;
                                    border: none;
                                    border-radius: 50%;
                                    color: $text-primary;
                                    box-shadow: inset 0 0 6px rgb(255 252 0 / 50%);
                                    background-image: linear-gradient(360deg, #f06531 -4.69%, #ffa468 125.79%), linear-gradient(0.36deg, #ff0 -151.33%, rgb(63 63 63 / 0%) 133.42%);
                                    z-index: 1;

                                    &:hover {
                                        filter: brightness(1.1);
                                    }
                                }
                            }

                            & > .project-name {
                                position: relative;
                                display: block;
                                color: $text-primary;
                                width: 178px;
                                height: min-content;
                                margin: 0;
                                padding: 3px 0;
                                z-index: 1;
                            }

                            & > .project-last-edited {
                                position: relative;
                                display: block;
                                font-size: 0.8rem;
                                color: rgba($text-primary, 0.5);
                                height: min-content;
                                width: 178px;
                                margin: 0;
                                padding: 3px 0;
                                padding-top: 0;
                                z-index: 1;
                            }

                            & > .project-stats-container {
                                display: flex;
                                justify-content: space-between;
                                width: 178px;
                                left: 0;
                                right: 0;
                                bottom: 0;
                                z-index: 1;
                                transition: all 0.25s ease-in-out;

                                &.noadmin {
                                    justify-content: start;
                                }

                                & > .stat {
                                    @extend .font-regular;

                                    color: $text-primary;
                                    font-size: 0.7rem;
                                    margin: 3px 0;

                                    &::before {
                                        @extend .font-icon;

                                        display: inline-block;
                                        font-size: 0.7rem;
                                        margin-right: 5px;
                                        color: $text-primary;
                                    }
                                }

                                & > #forks-stat::before { content: '\E431'; }
                                & > #views-stat::before { content: '\E308'; }
                                & > #plays-stat::before { content: '\E180'; }
                            }

                            &::after {
                                content: '';
                                display: block;
                                background-image: linear-gradient(180deg, rgb(255 255 255 / 0%) 0%, rgb(255 102 0 / 40%) 128.11%);
                                height: 0;
                                width: 100%;
                                position: absolute;
                                left: 0;
                                bottom: 0;
                                opacity: 0;
                                transition: all 0.35s ease-in-out;
                            }
                        }
                    }

                    & > .no-projects-button {
                        position: absolute;
                        top: 80px;
                        left: 20px;
                        align-items: center;
                        justify-content: center;
                        width: 178px;
                        height: 178px;
                        background: none;
                        font-size: 2.5rem;
                        border: 2px solid rgba($text-primary, 0.7);
                        color: rgba($text-primary, 0.7);
                        border-style: dashed;
                        box-shadow: initial;
                        transition: all 0.3s ease-in-out;

                        &:not(.pcui-hidden) {
                            display: flex;
                        }

                        &:hover {
                            border-color: rgba($text-primary, 1);
                            color: rgba($text-primary, 1);
                        }
                    }
                }
            }
        }
    }
}

.ui-overlay.picker-new-organization {
    z-index: 10000;

    & > .content {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        height: fit-content;
        width: 500px;

        & > .new-organization-panel {
            height: 100%;

            & > .pcui-panel-header {
                position: relative;
                display: flex;
                justify-content: center;
                align-items: center;

                & > span {
                    font-size: 12px;
                    width: min-content;
                    margin: 0;
                    flex: unset;
                }

                & > .close {
                    position: absolute;
                    right: 0;
                    box-shadow: none;
                    border: none;
                    background: none;
                }
            }

            & > .pcui-panel-content {
                display: flex;
                flex-direction: column;
                gap: 5px;
                height: 100%;
                padding: 25px 15px 10px;

                .form-group--label {
                    margin-top: 0;
                    margin-bottom: 0;
                    color: $text-primary;
                }

                .form-group--hint {
                    margin-top: 0;
                    font-size: 0.8em;
                    filter: opacity(0.5);
                }

                & > .create-org-button {
                    border: none;
                    margin-top: 20px;
                    box-shadow: none;
                    padding-top: 5px;
                    padding-bottom: 5px;
                    background-color: $text-active;
                    color: $text-primary;
                    height: fit-content;
                    transition: all 0.3s ease-in-out;

                    &:hover {
                        color: $text-active;
                        background-color: $text-primary;
                    }

                    &.pcui-disabled {
                        background-color: $bcg-dark;
                        font-weight: 800;
                    }
                }
            }
        }
    }
}

.ui-overlay.picker-delete-organization {
    z-index: 10000;

    & > .content {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        height: fit-content;
        width: 500px;

        & > .delete-organization-panel {
            height: 100%;

            & > .pcui-panel-header {
                position: relative;
                display: flex;
                justify-content: center;
                align-items: center;

                & > span {
                    font-size: 12px;
                    width: min-content;
                    margin: 0;
                    flex: unset;
                }

                & > .close {
                    position: absolute;
                    right: 0;
                    box-shadow: none;
                    border: none;
                    background: none;
                }
            }

            & > .pcui-panel-content {
                display: flex;
                flex-direction: column;
                gap: 5px;
                height: 100%;
                padding: 25px 15px 10px;

                .form-group--label {
                    white-space: pre-wrap;
                    margin-top: 0;
                    margin-bottom: 5px;
                    color: $text-primary;
                }

                .form-group--warning {
                    @extend .font-regular;

                    position: relative;
                    display: block;
                    padding: 3% 5% 3% 10%;
                    margin-bottom: 3%;
                    background-color: $error-secondary;
                    color: $text-primary;
                    white-space: pre-wrap;

                    &::before {
                        @extend .font-icon;

                        content: '\E218';
                        display: block;
                        position: absolute;
                        left: 4%;
                        top: 50%;
                        transform: translateY(-50%);
                    }
                }

                & > .delete-org-button {
                    border: none;
                    margin-top: 10px;
                    box-shadow: none;
                    padding-top: 5px;
                    padding-bottom: 5px;
                    background-color: $error-secondary;
                    color: $text-primary;
                    height: fit-content;
                    transition: all 0.3s ease-in-out;

                    &.pcui-disabled {
                        background-color: $bcg-dark;
                        font-weight: 800;
                    }

                    &:hover:not(.pcui-disabled) {
                        background-color: $error;
                    }
                }
            }
        }
    }
}

.ui-overlay.picker-delete-project {
    z-index: 100000;

    & > .content {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        height: fit-content;
        width: 500px;

        & > .delete-project-panel {
            height: 100%;

            & > .pcui-panel-header {
                position: relative;
                display: flex;
                justify-content: center;
                align-items: center;

                & > span {
                    font-size: 12px;
                    width: min-content;
                    margin: 0;
                    flex: unset;
                }

                & > .close {
                    position: absolute;
                    right: 0;
                    box-shadow: none;
                    border: none;
                    background: none;
                }
            }

            & > .pcui-panel-content {
                display: flex;
                flex-direction: column;
                gap: 5px;
                height: 100%;
                padding: 25px 15px 10px;

                .form-group--label {
                    white-space: pre-wrap;
                    margin-top: 0;
                    margin-bottom: 5px;
                    color: $text-primary;
                }

                .form-group--hint {
                    margin-top: 0;
                    font-size: 0.8em;
                    filter: opacity(0.5);
                }

                .delete-project-button {
                    border: none;
                    margin-top: 10px;
                    box-shadow: none;
                    padding-top: 5px;
                    padding-bottom: 5px;
                    background-color: $error-secondary;
                    color: $text-primary;
                    height: fit-content;
                    transition: all 0.3s ease-in-out;

                    &.pcui-disabled {
                        cursor: not-allowed;
                        background-color: $bcg-dark;
                        font-weight: 800;
                    }

                    &:hover:not(.pcui-disabled) {
                        background-color: $error;
                    }
                }

                .loader {
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                }
            }
        }
    }
}

.ui-overlay.picker-project {
    z-index: 300; // larger than drop-area's
    display: flex;
    align-items: center;
    justify-content: center;

    &.cmsView { z-index: 100000; }
    &.noAdminView { z-index: 100000; }

    // make labels non-selectable - to make a label
    // selectable add the 'selectable' class to it
    .ui-label:not(.selectable),
    .ui-header {
        @extend .noSelect;
    }

    &.center {
        > .content {
            @extend .font-regular;

            top: auto;
            left: auto;
            width: 100%;
            max-width: 1060px;
            height: 100%;
            border: 1px solid $border-primary;

            @media (min-width: 1060px) {
                height: 600px;
            }

            .ui-panel.project {
                height: 100%;

                > .content {
                    display: flex;
                    height: 100%;

                    .ui-panel.left {
                        background-color: $bcg-dark;
                        margin: 0;
                        padding: 0;
                        flex: 0 0 188px;
                        width: 188px;
                        height: 100%;
                        border-right: 1px solid $border-primary;

                        > .content {
                            $c: &;

                            height: 100%;
                            position: relative;

                            .image {
                                width: 187px;
                                height: 187px;
                                border-bottom: 1px solid $border-primary;
                                background-color: $bcg-primary;
                                background-size: 100%;

                                &.progress {
                                    background-size: 17%;
                                    background-position: 50%;
                                    background-repeat: no-repeat;
                                    background-color: $bcg-darkest;
                                }

                                &:hover {
                                    #{$c} .project-stats {
                                        background: none !important;
                                    }
                                }

                                &.hover:hover {
                                    cursor: pointer;
                                }
                            }

                            .project-stats {
                                position: absolute;
                                display: flex;
                                padding-top: 3px;
                                justify-content: flex-start;
                                top: 0;
                                left: 0;
                                right: 0;
                                height: 50px;
                                font-size: 0.8em;
                                color: $text-secondary;
                                background-image: linear-gradient(rgb(0 0 0 / 80%) 15%, transparent);
                                opacity: 1;
                                transition: transform 0.4s ease-in-out, opacity 0.2s ease-in, background-image 0.4s ease-in-out;

                                span {
                                    @extend .font-regular;

                                    &::before {
                                        @extend .font-icon;

                                        margin-right: 5px;
                                    }
                                }

                                .forks-stat::before { content: '\E431'; }
                                .views-stat::before { content: '\E117'; }
                                .plays-stat::before { content: '\E180'; }

                                .size-stat {
                                    position: absolute;
                                    top: 0;
                                    right: 0;
                                    padding-top: 3px;
                                }
                            }

                            .thumbnail-buttons {
                                position: absolute;
                                top: 150px;
                                width: 100%;
                                display: flex;
                                flex-direction: row;
                                justify-content: center;
                                transform: translate(0, 32px);
                                pointer-events: none;
                                transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, z-index 0.25s ease-in-out;

                                & > .thumbnail-replace {
                                    flex: 9;
                                    margin-right: 0;
                                }

                                & > .thumbnail-delete {
                                    flex: 1;
                                }
                            }

                            .project-cms-button {
                                position: absolute;
                                bottom: 10px;
                                margin-left: 0;
                                margin-right: 0;
                                padding: 0;
                                background-color: transparent;
                                box-shadow: none;
                                border: none;
                                width: 100%;
                            }

                            .cms-editor-button,
                            .cms-play-button {
                                @extend .font-regular;

                                position: absolute;
                                left: 0;
                                width: calc(100% - 10px);
                                margin: 5px;
                                border-radius: initial;
                                box-shadow: none;

                                &.pcui-disabled { cursor: not-allowed; }
                            }

                            .cms-editor-button {
                                bottom: 40px;
                                background-color: $text-active;
                                color: $text-primary;

                                &:hover {
                                    color: $text-active;
                                    background-color: $text-primary;
                                }
                            }

                            .cms-play-button {
                                bottom: 10px;
                            }

                            @keyframes slide-down {
                                0% {
                                    top: -50px;
                                    opacity: 0;
                                }

                                100% {
                                    top: 0;
                                    opacity: 1;
                                }
                            }
                        }

                        .info {
                            padding: 5px 10px;
                            border-bottom: 1px solid $border-primary;

                            .name {
                                font-size: 14px;
                                color: $text-primary;
                                max-width: 100%;
                                overflow: hidden;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                            }
                        }

                        ul {
                            padding: 0;
                            margin: 0;

                            li {
                                margin: 0;
                                padding: 0 10px;
                                height: 36px;
                                line-height: 36px;
                                border: none;
                                border-bottom: 1px solid $border-primary;
                                text-transform: uppercase;
                                font-size: 12px;

                                @extend .font-bold;

                                &:hover,
                                &.active {
                                    color: $text-primary;
                                    background-color: $bcg-primary;
                                    cursor: pointer;
                                    margin: 0;

                                    &::before {
                                        color: $text-active;
                                    }
                                }

                                &::before {
                                    @extend .font-icon;

                                    font-size: 14px;
                                    vertical-align: top;
                                    padding-right: 10px;
                                }

                                &.project-main::before {
                                    content: '\E283';
                                }

                                &.projects::before {
                                    content: '\E267';
                                }

                                &.scenes::before {
                                    content: '\E147';
                                }

                                &.builds-publish::before {
                                    content: '\E226';
                                }

                                &.checkpoints::before {
                                    content: '\E401';
                                }

                                &.version-control::before {
                                    content: '\E399';
                                }

                                &.team::before {
                                    content: '\E337';
                                }
                            }
                        }
                    }

                    .ui-panel.right {
                        flex: 1 1 auto;
                        height: 100%;
                        min-width: 0;

                        > .ui-header {
                            border-bottom: 1px solid $border-primary;

                            .title {
                                font-size: 12px;
                                text-transform: uppercase;
                                padding-left: 5px;
                            }

                            .close {
                                @extend .font-icon;

                                font-size: 14px;
                                position: absolute;
                                top: 0;
                                right: 0;
                                color: $text-secondary;
                                background-color: transparent;
                                border-color: transparent;

                                &:hover {
                                    color: $text-primary;
                                }
                            }
                        }

                        > .content {
                            height: calc(100% - 33px);
                            overflow: hidden;
                            overflow-y: auto;

                            > .ui-panel {
                                > .content {
                                    padding: 0;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

.ui-overlay.picker-project.reduced-view { z-index: 100000; }

.ui-overlay.picker-modal-confirmation {
    z-index: 100001;  // larger than CMS

    > .content {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        height: fit-content;
        width: 500px;

        & > .pcui-panel {
            & > .pcui-panel-header {
                position: relative;
                display: flex;
                justify-content: center;

                & > span {
                    flex: initial;
                    margin: 0;
                }

                & > .close {
                    position: absolute;
                    right: 0;
                    background-color: transparent;
                    box-shadow: unset;

                    &:hover { color: $text-active; }
                }
            }

            & > .pcui-panel-content {
                padding: 20px 25px;

                & > span {
                    white-space: pre-wrap;
                    margin-bottom: 20px;
                }

                & > .positive-action-button,
                & > .negative-action-button {
                    width: 100%;
                    padding: 17px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border: none;
                    box-shadow: initial;
                }

                & > .positive-action-button {
                    background-color: $text-active;
                    color: $text-primary;
                    transition: all 0.2s ease-in-out;

                    &:hover {
                        background-color: $text-primary;
                        color: $text-active;
                    }
                }
            }
        }
    }
}

.ui-overlay.picker-project-new {
    z-index: 100000; // larger than drop-area's

    > .content {
        position: relative;
        width: 1060px;
        height: 600px;
        left: calc(50% - 530px);
        top: calc(50% - 300px);

        .ui-label:not(.selectable) {
            @extend .noSelect;
        }

        > .pcui-panel {
            height: 100%;

            > .pcui-panel-header {
                position: relative;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: $bcg-darker;

                & > .playcanvas-icon {
                    position: absolute;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    left: 0;
                    top: 0;
                    width: 35px;
                    height: 100%;
                    background-image: linear-gradient(360deg, #f06531 -4.69%, #ffa468 125.79%), linear-gradient(0.36deg, #ff0 -151.33%, rgb(63 63 63 / 0%) 133.42%);

                    &::after {
                        @extend .font-icon;

                        content: '\E268';
                        font-size: 1.1rem;
                    }
                }

                & > span {
                    width: fit-content;
                    flex: initial;
                    margin: 0;
                }

                & > .pcui-button.close {
                    @extend .font-icon;

                    position: absolute;
                    right: 0;
                    margin: 0;
                    top: 4px;
                    background: transparent;
                    border: 0;
                    font-size: 1.5em;

                    &:hover {
                        border: 0;
                        box-shadow: none;
                        color: $text-active;
                    }
                }
            }

            > .content {
                border-top: 1px solid $border-primary;
                padding: 0;
                overflow-y: visible;
                height: fit-content;
            }
        }

        // Container for Grid + Sidebar (no sidebar in mobile view)
        .modal-new-project-container {
            display: grid;
            grid-template-columns: calc(100% - 305px) 305px;
            overflow-y: visible;
            width: 100%;
            height: 100%;
        }

        // General Container for Grid + Tab-Bar
        .modal-new-project-main-view {
            position: relative;
            display: flex;
            padding: 10px 25px;
            max-height: 560px;
            align-items: center;
            flex-direction: column;
            overflow: hidden visible;

            .center-container {
                width: fit-content !important;
            }

            .header-container {
                position: fixed;
                z-index: 10;
                margin: 0 36px;
                width: 168px;  // No sidebar
            }

            // Tagged Menu Styling
            .tags-selector {
                display: flex;
                gap: 10px;
                width: 100%;
                height: fit-content;
                justify-content: flex-start;

                .tag-btn {
                    display: inline-block;
                    padding: 5px 10px;
                    width: fit-content;
                    color: $text-primary;
                    background-color: #454545;
                    cursor: pointer;

                    &.hovered,
                    &.selected {
                        background-color: $text-active;
                    }
                }
            }

            // Container Div for Grid of Starter Kit Thumbnails
            .modal-new-project-kits-container {
                display: grid;
                position: relative;
                justify-content: center;
                grid-template-columns: repeat(4, 168px);
                column-gap: 15px;
                padding: 0 51px;
                flex-wrap: wrap;
                overflow: hidden scroll;
                margin-bottom: 20px;
                height: fit-content;
                width: 100%;
                margin-top: 10px;

                // Hide scrollbar in grid element
                &::-webkit-scrollbar {
                    display: none;
                }
            }

            // Reduces margin-top in uncategorised design
            .reducedmargin {
                margin-top: 20px !important;
            }
        }

        // Modal Sidebar (Thumbnail, Form, Create Button)
        .modal-new-project-sidebar {
            position: relative;
            display: flex;
            height: 100%;
            flex-direction: column;

            .starter-kit-preview {
                display: flex;
                align-items: center;
                justify-content: center;
                overflow: hidden;
                width: 100%;
                height: 255px;

                img {
                    display: block;
                    width: 100%;
                }
            }

            // Modal Form Content (Title, Description...)
            .modal-new-project-form-content {
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                padding: 20px 20px 0;
                flex-grow: 1;
                height: fit-content;
                overflow-y: none;
                background-color: $bcg-darker;

                &::-webkit-scrollbar-track {
                    background-color: transparent;
                }

                &::-webkit-scrollbar {
                    width: 0.5em;
                }

                &::-webkit-scrollbar-thumb {
                    background-color: rgb(96 96 96 / 50%);
                }

                .form-group {
                    display: flex;
                    flex-direction: column;
                    justify-content: start;
                }

                span {
                    color: $text-primary !important;
                    font-weight: bold !important;
                }

                .form-control {
                    font-size: 12px;

                    &:not(.pcui-focus) { background-color: $bcg-primary; }
                }

                .form-profile {
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;
                    padding: 5px;
                    background-color: $text-primary;

                    img {
                        margin-right: 10px;
                    }
                }

                & > .form-owner {
                    margin-bottom: 10px;

                    & > .owner-dropdown {
                        & > .pcui-select-input-container-value {
                            .owner-profile {
                                left: 5px;
                                display: inline-block;
                                width: 20px;
                                height: 20px;
                                position: absolute;
                                top: 50%;
                                transform: translateY(-50%);
                            }

                            & > span {
                                @extend .font-regular;

                                line-height: 40px;
                                height: 40px;
                                padding-left: 30px;
                                background-color: $bcg-primary;

                                &:focus,
                                &:hover {
                                    & + .pcui-select-input-icon { background-color: $bcg-darker; }

                                    background-color: $bcg-darker;
                                }
                            }

                            & > .pcui-select-input-icon {
                                position: absolute;
                                top: 50%;
                                transform: translateY(-50%);

                                &:focus,
                                &:hover { background-color: $bcg-darker; }
                            }

                            & > .pcui-select-input-list {
                                max-height: 250px;

                                & > span {
                                    @extend .font-regular;

                                    position: relative;
                                    display: block;
                                    line-height: 40px;
                                    height: 40px;
                                    padding-left: 30px;
                                    background-color: $bcg-primary;

                                    &:hover { background-color: $bcg-darker; }

                                    #text {
                                        margin-left: 10px;
                                    }
                                }
                            }
                        }
                    }
                }

                .form-toggle {
                    display: flex;
                    justify-content: space-between;

                    &.pcui-disabled {
                        opacity: 0.25;
                    }
                }

                // Select Owner Dropdown
                .modal-owner-wrapper {
                    height: 85px;
                    position: relative;

                    .owner {
                        position: absolute;
                        top: 25px;
                        left: 0;
                        width: 100%;

                        &:hover {
                            .down {
                                display: none;
                            }
                        }

                        .down {
                            position: absolute;
                            top: calc(50% + 16px);
                            width: 16px;
                            height: 16px;
                            right: 15px;
                            z-index: 102;
                            background: url('/static/platform/images/common/HOME_CHEVRON.png') #fff;
                            background-repeat: no-repeat;
                            background-size: 16px 16px;
                        }

                        .organization {
                            font-size: 12px;
                            float: right;
                        }

                        .overlay {
                            position: fixed;
                            top: 0;
                            left: 0;
                            width: 100%;
                            height: 200%;
                            z-index: 100;
                        }

                        ul {
                            list-style: none;
                            padding: 0;
                            margin: 0;
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 100%;
                            z-index: 101;
                            max-height: 150px;
                            overflow-y: auto;

                            li {
                                background-color: #fff;
                                border: 1px solid transparent;
                                line-height: 45px;
                                padding: 0 5px;

                                img {
                                    margin-right: 10px;
                                }

                                &:hover {
                                    cursor: pointer;
                                }
                            }
                        }
                    }
                }

                > .fields {
                    padding: 16px;
                    background-color: #fff;

                    > .switch {
                        display: block;
                        padding: 5px;
                    }
                }
            }

            // Create Button
            .create-btn-container {
                position: absolute;
                bottom: 0;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%;
                height: 84px;

                .create-btn {
                    height: 40px;
                    background-color: #f16524;
                    border: none;
                    color: #fff;
                    font-size: 1.15em;
                    width: 80%;

                    &:hover {
                        color: #f16524;
                        background-color: #fff;
                    }
                }

                .loader {
                    position: absolute;

                    &.white { filter: brightness(5); }
                }
            }
        }

        // Starter Kit Thumbnail + Title
        .starter-kit {
            display: flex;
            flex-direction: column;
            cursor: pointer;

            h4 {
                color: #fff;
                text-align: center;
                font-size: medium;
                margin-bottom: 5px;
            }

            .thumbnail {
                display: flex;
                align-items: center;
                justify-content: center;
                align-self: center;
                margin: 0;
                position: relative;
                height: 168px;
                background-color: #454545 !important;
                box-shadow: none !important;
                border: none !important;
                width: 168px;
                user-select: none;
                transition: all 0.2s ease-in-out;
                transition-property: top opacity;

                // If image is Blank Project image, don't stretch it
                .blankProject {
                    width: auto !important;
                }

                img {
                    width: 168px;
                    user-select: none;
                }

                .overlay {
                    position: absolute;
                    display: flex;
                    align-items: flex-end;
                    justify-content: flex-start;
                    inset: 75% 0 0;
                    opacity: 0;

                    /* stylelint-disable-next-line property-no-vendor-prefix */
                    -webkit-transform: translateZ(0); /* fix Chrome transition bug */
                    transition: opacity 200ms;
                    background: linear-gradient(to bottom, rgb(69 69 69 / 0%) 0%, rgb(224 95 44 / 100%) 100%);

                    .ui-icon-button {
                        display: flex !important;
                        border: none !important;
                        background-color: transparent !important;
                        width: fit-content;
                        padding: 15px;
                        visibility: visible;
                        opacity: 1;
                        transition: visibility 0.2s, opacity 0.2s ease-in-out;

                        img {
                            max-width: 100%;
                            width: auto;
                        }

                        &.ng-hide {
                            display: flex !important;
                            visibility: hidden;
                            opacity: 0;
                        }

                        &:hover {
                            img {
                                filter: brightness(1.2);
                            }
                        }
                    }

                    & > .preview-button {
                        position: absolute;
                        display: none;
                        left: 0;
                        bottom: 0;
                        margin: 10px;
                        border-radius: 50%;
                        color: #fff;
                        border: none;
                        background-image: linear-gradient(360deg, #f06531 -4.69%, #ffa468 125.79%), linear-gradient(0.36deg, #ff0 -151.33%, rgb(63 63 63 / 0%) 133.42%);
                        box-shadow: 0 0 10px rgba($text-darkest, 0.8);

                        &::before { height: 50%; }
                        &:hover { filter: brightness(1.1); }
                    }
                }
            }

            &.hovered {
                cursor: pointer;

                h4 {
                    color: $text-active;
                }

                & > .thumbnail > .overlay {
                    opacity: 0.95;
                }
            }

            &.selected {
                & > .thumbnail > .overlay {
                    opacity: 1;
                    top: 0;

                    & > .preview-button { display: block; }
                }
            }
        }
    }
}

// Individual Alert Popup
.alert {
    position: absolute;
    flex-direction: row;
    align-self: center;
    bottom: 0;
    left: 12px;
    width: calc(95% - 50px);
    padding: 20px 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: $error-secondary;
    font-size: 14px;
    margin: 10px;
    z-index: 10000000;

    // Text and icon for the alert dialog
    &-text {
        @extend .font-regular;

        display: flex;
        flex-direction: row;
        align-items: center;

        .alert--info {
            @extend .font-icon;

            &::before {
                content: '\E218';
                color: $text-primary;
                font-size: medium;
                margin-right: 20px;
            }
        }

        span {
            font-size: 14px;
            color: $text-primary;
            text-transform: uppercase;
        }
    }

    // Upgrade Button
    .btn {
        position: absolute;
        right: 70px;
        color: #e74c3c;
        background-color: $text-primary !important;
        border: none !important;
        padding: 0 50px;

        &:hover,
        &:focus {
            background-color: $bcg-darkest !important;
            border: none !important;
            color: #e74c3c;
        }
    }

    // Close Button for dialog
    &-close {
        display: block;
        position: relative;
        font-size: large;
        background: none !important;
        border: none;
        color: $text-primary;
        box-shadow: none !important;
        cursor: pointer;

        &:hover {
            &::before {
                color: $bcg-darkest;
            }
        }

        &::before {
            content: '\2715';
            font-size: large;
        }
    }
}

// Sorting Dropdown
.sorting-container {
    position: absolute;
    display: flex;
    background-color: $bcg-dark;
    width: max-content;
    padding: 5px;
    z-index: 10000000;

    & > #checkbox-menu-item {
        & > .pcui-boolean-input:not(.pcui-boolean-input-ticked) { background-color: $bcg-darker; }

        border-bottom: 2px solid $bcg-primary;
    }

    & > .sorting-menu-item {
        padding: 5px;
        display: flex;
        align-items: center;

        &:hover {
            cursor: pointer;
        }
    }
}

.ui-panel.right {
    header {
        display: flex;
        justify-content: center;

        span {
            @extend .font-regular;

            font-size: 14px;
            font-weight: 800;
        }
    }

    // Individual Alert Popup
    .alert {
        position: absolute;
        flex-direction: row;
        align-self: center;
        bottom: 0;
        left: 12px;
        width: calc(95% - 50px);
        padding: 20px 25px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #e74c3c;
        font-size: 14px;
        margin: 10px;

        // Text and icon for the alert dialog
        &-text {
            @extend .font-regular;

            display: flex;
            flex-direction: row;
            align-items: center;

            .alert--info {
                @extend .font-icon;

                &::before {
                    content: '\E218';
                    color: #fff;
                    font-size: medium;
                    margin-right: 20px;
                }
            }

            span {
                font-size: 14px;
                color: #fff;
                text-transform: uppercase;
            }
        }

        // Upgrade Button
        .btn {
            position: absolute;
            right: 70px;
            color: #e74c3c;
            background-color: #fff !important;
            border: none !important;
            padding: 0 50px;

            &:hover,
            &:focus {
                background-color: $bcg-darkest !important;
                border: none !important;
                color: #e74c3c;
            }
        }

        // Close Button for dialog
        &-close {
            display: block;
            position: relative;
            font-size: large;
            background: none !important;
            border: none;
            color: #fff;
            box-shadow: none;
            cursor: pointer;

            &:hover {
                &::before {
                    color: $bcg-darkest;
                }
            }

            &::before {
                content: '\2715';
                font-size: large;
            }
        }
    }
}

.ui-panel.picker-scene-panel,
.ui-panel.picker-publish-new {
    .ui-list.scene-list {
        margin: 0;
        padding: 0;
        background: transparent;
        border: none;
        border-top: 1px solid $border-primary;

        > li {
            @extend .font-regular;

            height: 65px;
            line-height: 65px;
            padding-left: 15px;
            padding-right: 15px;
            position: relative;
            border-bottom: 1px solid $border-primary;

            &.selected {
                background-color: transparent;
            }

            &.current:hover {
                background-color: transparent;
                cursor: default;
            }

            > .name {
                font-size: 14px;
                position: absolute;
                cursor: pointer;
                top: 15px;
                max-width: 710px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                line-height: 1;
                color: $text-primary;
            }

            > .primary {
                @extend .font-icon;

                top: 15px;
                left: 0;
                line-height: 1;
                height: 20px;
                color: $text-darkest;
                background: transparent;
                border: none;
                font-size: 16px;
                position: absolute;

                &:not(.disabled):hover {
                    cursor: pointer;
                    color: $text-dark;
                }
            }

            &.primary > .primary {
                color: $text-active;

                &:hover {
                    color: $text-active;
                    cursor: default;
                }
            }

            &:not(.current, .disabled):hover {
                background-color: #414f52;
                cursor: pointer;
            }

            &.current {
                &::after {
                    @extend .font-bold;

                    content: 'CURRENT';
                    position: absolute;
                    top: 25px;
                    right: 40px;
                    line-height: 16px;
                    text-align: center;
                    height: 16px;
                    width: 55px;
                    color: $bcg-primary;
                    background-color: $text-active;
                    font-size: 10px;
                }
            }

            > .date {
                position: absolute;
                top: 35px;
                font-size: 12px;
                color: $text-darkest;
                line-height: 1;
            }

            > .dropdown {
                position: absolute;
                top: 25px;
                right: 15px;
                width: 16px;
                height: 16px;
                line-height: 16px;
                border: none;
                padding: 0;
                margin: 0;
                text-align: center;
                vertical-align: top;

                @extend .font-icon;

                font-size: 12px;
                color: $bcg-darkest;
                background-color: $text-darkest;

                &:hover,
                &.clicked {
                    color: $text-primary;
                    background-color: $bcg-darkest;
                }
            }

            > .new-scene-label {
                margin-left: 0;
                margin-right: 0;
                display: block;
            }

            > .ui-text-field {
                display: block;
                width: 100%;
                line-height: 1;
                margin: 0;
            }
        }
    }
}

.ui-panel.picker-scene-panel {
    .content {
        font-size: 14px;

        @extend .font-regular;
    }

    > .content {
        > span {
            padding-left: 10px;
        }

        > .ui-text-field {
            margin: 10px;
            width: calc(100% - 20px);
        }

        > .ui-progress {
            width: 100%;
        }

        > .new {
            margin: 15px 0 15px 10px;
            padding: 0;
            width: 165px;
            height: 34px;
            line-height: 34px;
            font-size: 12px;
            text-transform: uppercase;

            @extend .font-bold;

            &::before {
                @extend .font-icon;

                font-size: 14px;
                content: '\E122';
                color: $text-secondary;
                vertical-align: top;
                padding-right: 10px;
                padding-left: 20px;
            }

            &:not(.disabled):hover::before {
                color: $text-active;
            }
        }
    }
}

.ui-panel.picker-publish-new {
    &.disabled {
        opacity: 0.5;
        pointer-events: none;
    }

    > .content {
        > .ui-panel > .content > .ui-label,
        > .info > .content > span > .ui-label {
            font-size: 12px;
            height: auto;
            line-height: initial;
            vertical-align: top;

            &.field-label {
                margin: 0 0 8px;
            }

            &.error {
                color: #fb222f;
                float: right;
            }
        }

        .ui-text-field.input-field {
            margin: 0;
            height: 36px;
            line-height: 34px;
            width: 100%;
            display: block;

            > input {
                @extend .font-regular;

                font-size: 14px;
                color: $text-primary;
            }

            &[placeholder] {
                &::after {
                    line-height: 34px;
                }
            }
        }

        .upgrade {
            color: #fff;
            padding: 15px;
            margin: 0;
            border-bottom: 1px solid $bcg-darker;
            display: none;
        }

        > .description > .content > textarea,
        > .notes > .content > textarea {
            display: block;
            border: 1px solid $bcg-darker;
            background-color: $bcg-dark;
            color: $text-primary;
            margin: 0;
            padding: 10px;
            resize: none;

            @extend .font-regular;

            font-size: 14px;
            width: calc(100% - 20px);
            height: 65px;

            &.active,
            &:hover,
            &:focus,
            &.focus {
                background-color: $bcg-darkest;
                outline: none;
                border-color: transparent;
                box-shadow: none;
            }
        }

        > .options {
            > .content {
                > .ui-panel.field {
                    > .content {
                        line-height: 24px;

                        > .ui-checkbox {
                            margin: 4px 8px 0 0;
                        }

                        > .ui-label {
                            margin: 0;
                            font-size: 12px;
                            line-height: 24px;
                            vertical-align: top;
                        }
                    }
                }
            }
        }

        > .ui-button {
            margin: 0 0 15px 15px;
            padding: 0;
            height: 34px;
            line-height: 34px;
            font-size: 12px;
            text-transform: uppercase;
            text-align: center;

            @extend .font-bold;

            &::before {
                @extend .font-icon;

                font-size: 14px;
                color: $text-secondary;
                vertical-align: top;
                padding-right: 10px;
            }

            &:not(.disabled):hover::before {
                color: $text-active;
            }

            &.publish {
                text-align: center;
                width: calc(100% - 30px);

                &::before {
                    content: '\E226';
                }
            }

            &.web-download,
            &.ios-download {
                display: none;
                width: 208px;

                &::before {
                    content: '\E245';
                }
            }
        }

        .ui-button.help {
            @extend .font-icon;

            background: transparent;
            vertical-align: top;
            line-height: 1;
            display: inline;
            border: none;
        }

        > .ui-panel {
            margin: 0;
            padding: 15px;
            border-bottom: 1px solid $border-primary;

            &.info {
                > .content {
                    > .image {
                        display: inline-block;
                        width: 80px;
                        height: 80px;
                        border: 2px solid $border-primary;
                        margin-right: 15px;
                        vertical-align: top;
                        background-size: 100% 100%;

                        &.progress {
                            background-size: 40%;
                            background-position: 50%;
                            background-repeat: no-repeat;
                            background-color: $bcg-darkest;
                        }

                        &.blank {
                            background-size: 180%;
                        }

                        &:hover {
                            cursor: pointer;
                        }
                    }

                    > span {
                        display: inline-block;
                        width: calc(100% - 100px);

                        > .name {
                            margin-bottom: 8px;
                        }
                    }
                }
            }

            &.scenes {
                border-bottom: none;

                > .content {
                    > .ui-checkbox {
                        float: right;
                        margin: 0;
                        margin-top: 2px;
                    }

                    > .ui-label.select-all {
                        float: right;
                        padding-right: 10px;
                    }

                    > .ui-progress {
                        width: 100%;
                    }

                    > .ui-label.error {
                        float: none;
                    }

                    > .ui-list {
                        margin-top: 10px;

                        > .ui-list-item {
                            border-top: 1px solid $border-primary;
                            border-bottom: none;
                            padding-left: 0;

                            &:last-child {
                                border-bottom: 1px solid $border-primary;
                            }

                            &:hover {
                                background-color: transparent;
                                cursor: default;

                                > .name {
                                    color: $text-primary;
                                }
                            }

                            > .name {
                                left: 30px;

                                &:hover {
                                    cursor: default;
                                }
                            }

                            > .date {
                                left: 30px;
                            }

                            > .ui-checkbox {
                                position: absolute;
                                top: 25px;
                                right: 0;
                                margin: 0;
                            }

                            > .primary {
                                padding-left: 0;
                                margin-left: 0;
                            }
                        }
                    }
                }
            }
        }
    }

    &.upgrade {
        > .content {
            .upgrade {
                display: block;
            }

            .ui-panel {
                &.info,
                &.scenes,
                &.options,
                &.notes {
                    display: none;
                }
            }

            .ui-button {
                display: none !important;
            }
        }
    }

    &.download-mode {
        .ui-panel {
            &.description,
            &.version {
                display: none;
            }

            &.info {
                > .content {
                    > .image {
                        display: none;
                    }

                    > span {
                        width: 100%;

                        > .image-click {
                            display: none;
                        }
                    }
                }
            }
        }

        .ui-button.publish,
        .ui-panel.notes {
            display: none;
        }

        .ui-button.web-download,
        .ui-button.ios-download {
            display: inline-block;
        }

        .progress {
            border-top: 1px solid $border-primary;
            padding: 15px;

            > .icon {
                background-color: $bcg-darkest;
                width: 74px;
                height: 74px;
                display: inline-block;
                text-align: center;

                > img {
                    width: 30px;
                    height: 30px;
                    padding-top: 20px;
                }

                &.success,
                &.error {
                    > img {
                        display: none;
                    }
                }

                &.success {
                    &::after {
                        @extend .font-icon;

                        font-size: 34px;
                        display: block;
                        margin-top: 15px;
                        color: $text-secondary;
                        content: '\E245';
                    }
                }

                &.error {
                    background-color: #e74c3c;

                    &::after {
                        @extend .font-icon;

                        font-size: 34px;
                        display: block;
                        margin-top: 15px;
                        color: $bcg-darkest;
                        content: '\E132';
                    }
                }
            }

            > .progress-info {
                display: inline-block;
                position: relative;
                vertical-align: top;
                margin-left: 2px;
                background-color: $bcg-darkest;
                height: 64px;
                line-height: 64px;
                padding: 5px;
                width: calc(100% - 86px);
                overflow: auto;

                > .progress-title {
                    color: $text-primary;
                    font-size: 14px;
                    vertical-align: middle;

                    &.error {
                        position: static;
                        padding: 0;
                    }
                }

                > .ready {
                    position: absolute;
                    top: 15px;
                    right: 15px;
                    background-color: color.adjust($text-active, $alpha: -0.1);
                    width: 122px;
                    height: 34px;
                    font-size: 12px;
                    line-height: 34px;
                    padding: 0;
                    text-align: center;
                    color: $text-primary;
                    text-transform: uppercase;

                    @extend .font-bold;

                    &::before {
                        @extend .font-icon;

                        font-size: 16px;
                        vertical-align: top;
                        padding-right: 10px;
                        content: '\E245';
                    }

                    &:hover {
                        background-color: $text-active;
                    }
                }
            }
        }
    }
}

.picker-builds-publish {
    > .content {
        padding: 5px 20px !important;
    }

    padding: 5px 20px !important;

    > span {
        margin: 0;

        &.build {
            font-size: 12px;
            width: 100%;
            padding-top: 10px;
            padding-bottom: 10px;
        }

        &.builds-list-heading {
            @extend .font-regular;

            color: $text-primary;
            padding-bottom: 10px;
            padding-top: 10px;
        }

        &.no-builds-label {
            width: 100%;
        }
    }

    > .pcui-progress {
        width: 100%;
    }

    > .publish-buttons-container {
        display: flex;
        flex-direction: row;

        & > .buttons {
            border-left: 1px solid $border-primary;
            border-right: 1px solid $border-primary;
            border-top: 1px solid $border-primary;
            margin: 15px;
            text-align: center;
            flex-grow: 1;
            flex-basis: 0;

            &.collapsed { border: unset; }

            > .pcui-label {
                text-align: center;
                opacity: 0.8;
                color: $text-primary;

                &.icon {
                    @extend .font-icon;

                    font-size: 70px;
                    margin: 30px 0 0;
                }

                &.desc {
                    color: $text-primary;
                    font-size: 13px;
                    padding: 13px;
                }
            }

            > .pcui-button {
                display: flex;
                justify-content: center;
                margin: 0;
                padding: 0;
                width: 100%;
                height: 34px;
                line-height: 34px;
                font-size: 12px;
                text-transform: uppercase;
                text-align: center;
                box-shadow: unset;

                @extend .font-bold;

                &::before {
                    @extend .font-icon;

                    display: block;
                    margin-right: 10px;
                }

                &.publish.collapsed { &::before { content: '\E268'; } }
                &.download.collapsed { &::before { content: '\E245'; } }
            }

            &:hover {
                cursor: pointer;
                background: $bcg-dark;

                > .pcui-label {
                    opacity: 1;
                }

                > .pcui-button {
                    &:not(.disabled) {
                        background: $bcg-darkest;
                        color: $text-primary;

                        &::before {
                            color: $text-active;
                        }
                    }
                }
            }
        }
    }

    > ul {
        margin: 0;
        padding: 0;
        border: none;
        background: transparent;

        > li {
            @extend .font-regular;

            height: auto;
            line-height: initial;
            padding: 0 15px 7px;
            position: relative;
            border-bottom: 1px solid $border-primary;
            background: transparent;
            cursor: default;

            &.complete:hover {
                background-color: #414f52;
                cursor: pointer;

                > .name {
                    color: $text-active;
                }
            }

            &:not(.complete):hover {
                background-color: transparent;
            }

            > .primary {
                @extend .font-icon;

                top: 15px;
                left: 0;
                line-height: 1;
                height: 20px;
                color: $text-darkest;
                background: transparent;
                border: none;
                font-size: 16px;
                position: absolute;

                &:not(.disabled):hover {
                    color: $text-dark;
                    cursor: pointer;
                }
            }

            &.primary > .primary {
                color: $text-active;

                &:hover {
                    color: $text-active;
                    cursor: default;
                }
            }

            > .status {
                width: 40px;
                height: 40px;
                line-height: 40px;
                display: inline-block;
                border: 1px solid $border-primary;
                position: absolute;
                text-align: center;
                top: 16px;
                left: 35px;
                background-color: $bcg-darkest;
            }

            &.complete {
                > .status > img {
                    width: 40px;
                    height: 40px;
                }
            }

            &.running {
                > .status > img {
                    width: 25px;
                    height: 25px;
                    display: inline-block;
                    vertical-align: middle;
                }
            }

            &.error {
                > .status {
                    background-color: #e74c3c;

                    &::after {
                        color: $bcg-dark;

                        @extend .font-icon;

                        font-size: 24px;
                        content: '\E132';
                        display: inline-block;
                        vertical-align: middle;
                    }
                }
            }

            > .name-row {
                position: absolute;
                left: 90px;
                top: 15px;
                line-height: 1;

                > .name,
                > .version {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    margin-top: 0;
                    vertical-align: top;
                }

                > .name {
                    font-size: 14px;
                    max-width: 710px;
                    color: $text-primary;
                }

                > .version {
                    max-width: 50px;
                }
            }

            > .info {
                position: absolute;
                top: 35px;
                left: 90px;

                > .size,
                > .views,
                > .date,
                > .branch {
                    padding-right: 10px;

                    &::before {
                        @extend .font-icon;

                        font-size: 12px;
                        padding-right: 6px;
                        color: $text-darkest;
                    }
                }

                > .size::before {
                    content: '\E216';
                }

                > .branch::before {
                    content: '\E399';
                }

                > .views::before {
                    content: '\E308';
                }
            }

            > .error {
                color: #e74c3c;
                margin-left: 80px;
                white-space: normal;
                word-wrap: break-word;
                margin-top: 40px;
                width: calc(100% - 135px);
            }

            > .notes {
                margin-top: 65px;
                margin-left: 80px;
                white-space: pre-wrap;
                width: calc(100% - 135px);

                &.no-wrap {
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }

            > .more {
                background-color: transparent;
                color: $text-dark;
                cursor: pointer;
                font-size: 12px;
                border: none;
                margin: 0;
                padding: 0;
                position: absolute;
                top: 64px;
                right: 10px;

                &:hover {
                    color: $text-primary;
                }
            }

            > .dropdown {
                position: absolute;
                top: 25px;
                right: 15px;
                width: 16px;
                height: 16px;
                line-height: 16px;
                border: none;
                padding: 0;
                margin: 0;
                text-align: center;
                vertical-align: top;

                @extend .font-icon;

                font-size: 12px;
                color: $bcg-darkest;
                background-color: $text-darkest;

                &:hover,
                &.clicked {
                    color: $text-primary;
                    background-color: $bcg-darkest;
                }
            }
        }
    }
}

.picker-project-main {
    height: 100%;
    overflow: hidden;

    & > .project-settings {
        display: flex;
        gap: 10px;
        padding: 25px;

        .pcui-disabled {
            cursor: not-allowed !important;

            input,
            textarea {
                cursor: not-allowed !important;
            }
        }

        span {
            @extend .font-regular;

            color: $text-primary;
            margin-bottom: 0;
        }

        > .settings-group {
            .form-input {
                input,
                textarea {
                    font-size: 14px;
                    line-height: 22px;
                }
            }
        }

        > .horizontal-container {
            display: flex;
            width: 100%;
            align-items: center;
            justify-content: space-between;
        }
    }

    & > .locked-container { padding: 25px; }

    & > .action-buttons {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: min-content;
        padding: 25px;

        & > .full-width-button {
            margin-bottom: 0;
        }

        .loader {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        & > #delete-project-button {
            transition: all 0.2s ease-in-out;

            &:hover:not(.pcui-disabled) {
                background-color: $error-secondary;
                border: none;
                box-shadow: initial;
            }

            &.pcui-disabled {
                cursor: not-allowed;
            }
        }
    }

    & > .copied-url-popup {
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translate(-50%, 40px);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: min-content;
        padding: 5px;
        background-color: $text-active;
        opacity: 0;
        transition: all 0.25s ease-in-out;

        &.open {
            transform: translate(-50%, 0);
            opacity: 1;
        }

        & > span {
            @extend .font-regular;

            color: $text-primary;

            &::before {
                @extend .font-icon;

                content: '\E400';
                line-height: 1.1em;
                margin-right: 5px;
            }
        }
    }
}

.ui-panel.layers {
    &:not(.folded) {
        overflow: visible;
    }

    > .content {
        .ui-button.icon {
            background-color: $bcg-dark;

            &:hover {
                background-color: $bcg-darkest;

                &::before {
                    color: $text-active;
                }

                &.remove::before {
                    color: #d34141;
                }
            }

            &.wide {
                width: calc(100% - 6px);
            }

            font-size: 12px;
            border: none;
            position: relative;
            height: 28px;
            line-height: 30px;
            padding-left: 28px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-transform: uppercase;
            text-align: left;

            @extend .font-bold;

            &::before {
                @extend .font-icon;

                font-size: 14px;
                text-align: center;
                margin-left: -18px;
                margin-right: 9px;
            }

            &.create::before {
                content: '\E120';
            }

            &.remove::before {
                content: '\E124';
            }
        }

        .ui-text-field.new-name {
            &.error {
                border: 1px solid #d34141;
            }
        }

        .ui-panel.layers-container {
            margin: 8px 0;

            > .content {
                > .ui-panel.layer {
                    transition: none;

                    > .content {
                        border-left: 1px solid $bcg-darkest;
                        border-right: 1px solid $bcg-darkest;

                        > .ui-panel > .content > .ui-label {
                            min-width: 100px;
                        }
                    }

                    > .ui-header {
                        border: 1px solid $bcg-darkest;
                        background-color: $bcg-darker;
                        text-transform: none;

                        > .ui-button.remove {
                            @extend .font-icon;

                            font-weight: 400;
                            position: absolute;
                            right: 0;
                            top: 2px;
                            height: 32px;
                            width: 32px;
                            margin: 0;
                            padding: 0;
                            text-align: center;
                            border-color: transparent;
                            background-color: transparent;

                            &::before {
                                content: '\E124';
                            }

                            &:hover::before {
                                color: #d34141;
                            }
                        }
                    }
                }
            }
        }

        .ui-panel.layer-order {
            transition: none;

            &:not(.folded) {
                overflow: visible;
            }

            > .content {
                > .ui-panel.add-sublayer {
                    > .content {
                        padding: 8px 0;

                        > .ui-text-field {
                            position: relative;
                            display: block;
                            width: 100%;
                            margin: 0;

                            &:hover,
                            &:focus,
                            &.focus,
                            &.not-empty {
                                &::before,
                                &::after {
                                    content: '';
                                }
                            }

                            &::before {
                                content: '\E120';
                                position: absolute;
                                top: 0;
                                left: 8px;

                                @extend .font-icon;

                                font-weight: bold;
                                line-height: 24px;
                            }

                            &::after {
                                content: 'Add Sublayer';
                                position: absolute;
                                right: auto;
                                left: 30px;
                                top: 0;
                                padding: 0;
                                line-height: 24px;
                                color: $text-secondary;

                                @extend .font-bold;

                                font-weight: bold;
                                font-size: 12px;
                                text-transform: uppercase;
                            }
                        }

                        > .ui-list {
                            position: absolute;
                            top: 30px;
                            left: 0;
                            right: 0;
                            width: auto;
                            max-height: 220px;
                            margin: 0;
                            border-top: none;
                            z-index: 1;
                            overflow-y: auto;
                            background-color: $bcg-darkest;

                            > .ui-list-item {
                                color: $text-primary;
                                border-color: $bcg-darker;

                                &:hover,
                                &.active {
                                    color: $text-active;
                                }

                                &.selected {
                                    background-color: transparent;
                                }

                                &.new {
                                    &::before {
                                        content: '\E120';

                                        @extend .font-icon;

                                        font-size: 14px;
                                        padding-right: 4px;
                                    }
                                }
                            }
                        }
                    }
                }

                > .ui-panel.sublayers {
                    > .content {
                        padding: 0;

                        .ui-panel.sublayer {
                            background: $bcg-dark;
                            border: 1px solid $border-primary;

                            &.transparent {
                                background-size: 20px 20px;
                                background-position: 0 -13px, 10px -3px;
                                background-image:
                                    linear-gradient(45deg, $bcg-darker 25%, transparent 25%, transparent 75%, $bcg-darker 75%, $bcg-darker 100%),
                                    linear-gradient(45deg, $bcg-darker 25%, transparent 25%, transparent 75%, $bcg-darker 75%, $bcg-darker 100%);

                                &.dragged {
                                    $color: color.adjust($bcg-darkest, $lightness: -2%);

                                    background-image:
                                        linear-gradient(45deg, $color 25%, transparent 25%, transparent 75%, $color 75%, $color 100%),
                                        linear-gradient(45deg, $color 25%, transparent 25%, transparent 75%, $color 75%, $color 100%);
                                }

                                > .content {
                                    > .ui-label.name {
                                        max-width: calc(100% - 150px);
                                    }
                                }
                            }

                            &.dragged {
                                border: 1px solid $text-active;

                                > .content {
                                    > .handle {
                                        $color: $text-primary;
                                        $size: 6px;
                                        $inner-radius: 20%;
                                        $outer-radius: 55%;

                                        background: radial-gradient($color $inner-radius, transparent $outer-radius);
                                        background-size: $size $size;
                                        cursor: grabbing;
                                    }
                                }
                            }

                            > .content {
                                background: transparent;
                                font-size: 12px;

                                > .handle {
                                    position: absolute;
                                    left: 5px;
                                    top: 2px;
                                    width: 12px;
                                    height: 24px;
                                    cursor: move;

                                    @extend .noSelect;

                                    $color: color.mix($text-darkest, $bcg-primary, 50%);
                                    $size: 6px;
                                    $inner-radius: 20%;
                                    $outer-radius: 55%;

                                    background: radial-gradient($color $inner-radius, transparent $outer-radius);
                                    background-size: $size $size;

                                    &.disabled {
                                        cursor: not-allowed;
                                        opacity: 0.5;
                                    }

                                    &:not(.disabled):hover {
                                        $color: $text-primary;

                                        background: radial-gradient($color $inner-radius, transparent $outer-radius);
                                        background-size: $size $size;
                                    }
                                }

                                > .color {
                                    height: 28px;
                                    width: 8px;
                                    position: absolute;
                                    left: 22px;
                                    top: 0;
                                }

                                > .ui-label.name {
                                    color: $text-primary;
                                    margin-left: 26px;
                                    max-width: calc(100% - 130px);
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                }

                                > .ui-label.transparent {
                                    position: absolute;
                                    right: 60px;
                                }

                                > .ui-checkbox {
                                    position: absolute;
                                    right: 28px;

                                    &:not(.checked) {
                                        background-color: $bcg-darker;
                                    }
                                }

                                > .ui-button.remove {
                                    @extend .font-icon;

                                    position: absolute;
                                    right: 0;
                                    top: 2px;
                                    height: 28px;
                                    width: 30px;
                                    margin: 0;
                                    padding: 0;
                                    text-align: center;
                                    border-color: transparent;
                                    background-color: transparent;

                                    &::before {
                                        content: '\E124';
                                    }

                                    &:hover::before {
                                        color: #d34141;
                                    }
                                }
                            }
                        }

                        .ui-panel.sublayer + .ui-panel.sublayer:not(.dragged) {
                            border-top: 0;
                        }

                        .ui-panel.sublayer + .ui-panel.sublayer.dragged {
                            margin-top: -1px;
                        }
                    }
                }
            }
        }
    }

    &.dragged {
        cursor: grabbing;

        > .content {
            .ui-panel.layer-order {
                z-index: 104;
            }
        }
    }
}

.ui-overlay.layers-drag {
    > .overlay {
        cursor: grabbing;
    }

    > .content {
        display: none;
    }
}

.ui-panel.picker-checkpoint-panel {
    .content {
        font-size: 14px;

        @extend .font-regular;
    }

    > .content {
        > .btnCheckpointNew {
            margin: 15px 0 15px 10px;
            padding: 0;
            width: 165px;
            height: 34px;
            line-height: 34px;
            font-size: 12px;
            text-transform: uppercase;

            @extend .font-bold;

            &::before {
                @extend .font-icon;

                font-size: 14px;
                content: '\E122';
                color: $text-secondary;
                vertical-align: top;
                padding-right: 10px;
                padding-left: 20px;
            }

            &:not(.disabled):hover::before {
                color: $text-active;
            }
        }

        .checkpoint-list-div {
            overflow-y: scroll;
            height: 500px;
        }

        .ui-list.checkpoint-list {
            margin: 0;
            padding: 0;
            background: transparent;
            border: none;

            > li {
                @extend .font-regular;

                height: auto;
                border-top: 1px solid $border-primary;

                .checkpoint-item-info {
                    display: inline-block;
                    width: 80%;
                }

                .ch-info-first-line {
                    font-size: 14px;
                    color: $text-primary;
                    padding: 10px 15px 5px;
                    white-space: normal;
                    word-wrap: break-word;
                }

                .ch-info-second-line {
                    font-size: 12px;
                    line-height: 12px;
                    color: $text-secondary;
                    padding: 0 15px 10px;
                    white-space: normal;
                }

                .ui-button {
                    width: 19%;
                    margin-top: 16px;
                    vertical-align: top;
                    text-align: center;
                }

                &:not(.current, .disabled):hover {
                    background-color: #414f52;
                    cursor: default;
                }
            }
        }

        .btnCheckpointMore {
            width: 100%;
            text-align: center;
        }
    }
}

.ui-panel.attributes-array {
    > .content {
        padding: 0;
        flex-grow: 1;
        flex-direction: column;

        .ui-panel.attributes-array-elements {
            > .content {
                flex-direction: column;

                .ui-button.delete {
                    height: 22px;
                    width: 22px;

                    @extend .font-icon;

                    background: transparent;
                    border: 0;
                    margin: 0;
                    margin-left: 3px;
                    color: $text-darkest;

                    &:hover {
                        color: #fb222f;
                    }
                }

                > .ui-panel {
                    > .content {
                        align-items: center;
                        justify-content: space-between;
                    }

                    &.field-asset > .content > .top {
                        // flex-grow doesn't work here for some reason
                        // unless width has a pixel value so set width to 0
                        // and let flex-grow take over
                        width: 0;
                        flex-grow: 1;
                    }
                }
            }
        }
    }
}

.ui-panel.picker-version-control {
    height: 100%;

    > .content {
        height: 100%;
        overflow: hidden;

        svg {
            display: block;

            &.spin {
                g {
                    animation-name: spin;
                    animation-duration: 500ms;
                    animation-iteration-count: infinite;
                    animation-timing-function: linear;
                    transform-origin: center;
                }
            }

            &.hidden {
                display: none;
            }
        }

        > .ui-panel {
            height: 100%;

            > .content {
                height: 100%;
            }

            &.branches-container {
                min-width: 310px;
                border-right: 1px solid $border-primary;

                > .content {
                    flex-direction: column;
                }
            }

            &.side-panel {
                overflow: hidden;

                > .content {
                    flex-wrap: wrap;
                    place-content: flex-start;

                    > .side-panel-widget {
                        flex-grow: 1;
                        height: 100%;

                        > .content {
                            height: 100%;

                            > .ui-panel {
                                padding: 20px;

                                > .content {
                                    > .ui-label {
                                        display: block;

                                        &.title {
                                            font-size: 16px;
                                            color: $text-primary;
                                        }

                                        &.note {
                                            font-size: 13px;
                                            line-height: 1.4;
                                            color: $text-secondary;
                                        }
                                    }

                                    .ui-label.small {
                                        font-size: 12px;
                                    }
                                }

                                &.main {
                                    border-top: 1px solid $border-primary;
                                    box-sizing: border-box;
                                    overflow-y: auto;
                                    background: $bcg-dark;
                                }

                                &.buttons {
                                    border-top: 1px solid $border-primary;
                                    border-bottom: 1px solid $border-primary;
                                    height: 68px;
                                    padding: 20px;
                                    box-sizing: border-box;
                                    position: absolute;
                                    bottom: 0;
                                    width: 100%;

                                    .ui-button {
                                        float: right;
                                        height: 28px;
                                        line-height: 28px;
                                        text-align: center;
                                        text-transform: uppercase;
                                        min-width: 140px;
                                        margin: 0;
                                        margin-left: 10px;
                                        font-size: 12px;

                                        &.highlighted {
                                            color: $text-primary;
                                            background: color.adjust(#f60, $lightness: -7%);

                                            &:hover {
                                                background: color.adjust($text-active, $lightness: -10%);
                                            }

                                            &:active {
                                                background: color.adjust(#f60, $lightness: -12%);
                                            }
                                        }
                                    }
                                }
                            }
                        }

                        .ui-panel.version-control-side-panel-box {
                            margin-bottom: 20px;

                            > .ui-header {
                                @extend .allowSelect;

                                color: $text-secondary;
                                border: 1px solid $border-primary;

                                &::before {
                                    @extend .font-icon;

                                    content: '\E399';
                                    color: $text-active;
                                    font-size: 16px;
                                    float: left;
                                    margin-right: 5px;
                                    margin-top: -1px;
                                }

                                > .title {
                                    max-width: 270px;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                }

                                > .header-note {
                                    float: right;
                                    margin-top: 5px;
                                    margin-right: 10px;
                                    text-transform: none;
                                    color: $text-darkest;
                                }
                            }

                            &.no-icon > .ui-header::before {
                                display: none;
                            }

                            > .content {
                                border: 1px solid $border-primary;
                                border-top: 0;
                                flex-direction: column;

                                > .ui-panel.checkpoint-widget {
                                    margin: 10px;
                                }

                                > .ui-panel.checkpoint-checkbox {
                                    font-size: 12px;
                                    padding: 10px;
                                    border-top: 1px solid $border-primary;

                                    .ui-checkpoint {
                                        margin-left: 10px;
                                    }

                                    .help {
                                        @extend .font-icon;

                                        cursor: pointer;
                                        position: absolute;
                                        right: 0;
                                        font-size: 16px;
                                    }
                                }
                            }
                        }

                        &.create-checkpoint {
                            .ui-panel.main {
                                > .content {
                                    flex-direction: column;

                                    .ui-textarea-field {
                                        width: auto;
                                        height: 100px;
                                        background: $bcg-darkest;
                                    }

                                    .ui-button {
                                        width: 140px;
                                        text-transform: uppercase;
                                        text-align: center;
                                        align-self: center;
                                        background: $bcg-primary;
                                        font-size: 12px;
                                        height: 28px;
                                        line-height: 28px;
                                    }
                                }
                            }
                        }

                        &.create-branch {
                            .ui-panel.main {
                                > .content {
                                    flex-direction: column;

                                    .ui-panel {
                                        display: block;

                                        .ui-label {
                                            font-size: 12px;

                                            &.left {
                                                width: 120px;
                                            }
                                        }
                                    }

                                    .ui-label.branch-icon {
                                        @extend .font-icon;

                                        font-size: 32px;
                                        color: $text-darkest;
                                        margin: 5px auto 25px;
                                    }
                                }
                            }
                        }

                        &.close-branch,
                        &.hard-reset-checkpoint {
                            .ui-panel.main {
                                > .content {
                                    flex-direction: column;

                                    .ui-text-field {
                                        width: auto;
                                        margin-left: 15px;
                                    }

                                    .ui-label.close-icon {
                                        @extend .font-icon;

                                        font-size: 32px;
                                        color: $text-darkest;
                                        margin: 5px auto 25px;
                                    }
                                }
                            }
                        }

                        &.merge-branches {
                            .ui-panel.main {
                                > .content {
                                    flex-direction: column;

                                    .ui-label.left {
                                        font-size: 12px;
                                        width: 120px;
                                    }

                                    .ui-label.right {
                                        font-size: 12px;
                                        font-family: inconsolatamedium;
                                    }

                                    > .ui-label.arrow {
                                        @extend .font-icon;

                                        font-size: 32px;
                                        color: $text-darkest;
                                        margin: -19px auto 10px;
                                    }
                                }
                            }
                        }
                    }

                    .checkpoint-widget {
                        img {
                            width: 28px;
                            height: 28px;
                            margin-right: 15px;
                        }

                        .ui-panel.info {
                            flex-grow: 1;
                            margin-top: -7px;

                            > .content {
                                flex-direction: column;

                                .ui-panel.top-row {
                                    white-space: nowrap;

                                    .ui-label.desc {
                                        overflow: hidden;
                                        max-width: 360px;
                                        color: $text-primary;
                                        font-size: 13px;

                                        &.more {
                                            white-space: normal;
                                            word-break: break-word;
                                        }
                                    }

                                    .ui-button {
                                        position: absolute;
                                        background: transparent;
                                        border: 0;
                                        margin: 0;
                                        padding: 0;
                                        font-size: 11px;
                                        text-decoration: underline;
                                        top: 1px;
                                        right: 0;
                                        z-index: 1;

                                        &:hover {
                                            color: $text-primary;
                                        }
                                    }
                                }

                                .ui-panel.bottom-row {
                                    margin-top: -8px;

                                    .ui-label {
                                        &.info {
                                            color: $text-dark;
                                            font-size: 12px;
                                            max-width: 320px;
                                            overflow: hidden;
                                            text-overflow: ellipsis;
                                        }
                                    }
                                }
                            }
                        }
                    }

                    > .progress-widget {
                        align-self: center;
                        margin: auto;

                        .ui-label {
                            color: $text-primary;
                            font-size: 16px;
                            width: 100%;
                            text-align: center;

                            &.note {
                                &:not(.hidden) {
                                    display: block;
                                }

                                color: $text-secondary;
                                font-size: 12px;
                            }
                        }

                        svg {
                            margin: 15px auto auto;
                        }
                    }
                }

                &.align-center > .content {
                    align-content: center;
                }
            }

            .ui-panel.checkpoints-container {
                flex-grow: 1;
            }

            .branches-top,
            .checkpoints-top {
                height: 45px;
                width: 100%;
                padding: 10px;
                box-sizing: border-box;
                border-bottom: 1px solid $border-primary;

                > .content {
                    justify-content: space-between;

                    .ui-button {
                        margin: 0;
                    }
                }
            }

            .branches-filter {
                height: 45px;
                box-sizing: border-box;
                border-bottom: 1px solid $border-primary;
                padding: 7px 10px;

                > .content {
                    align-items: center;
                    height: 100%;

                    .ui-select-field {
                        margin: 0;
                        height: 22px;
                        line-height: 22px;

                        > .value {
                            line-height: 21px;

                            &::after {
                                line-height: 22px;
                            }
                        }
                    }
                }
            }

            .checkpoints-top {
                .ui-label.branch-history {
                    float: left;
                    color: $text-primary;
                    text-transform: uppercase;
                    font-size: 12px;

                    @extend .font-bold;
                }

                .ui-label.info {
                    color: $text-dark;
                    font-size: 12px;
                    margin-left: 6px;
                }

                .ui-button {
                    width: 147px;
                    float: right;

                    &.diff {
                        width: 105px;
                        margin-right: 5px;
                    }
                }

                .mini-spinner {
                    position: relative;
                    margin-left: auto;
                    margin-right: 0;
                    top: -32px;
                }
            }

            .ui-list {
                margin: 0;
                flex-grow: 1;
                border: 0;
                background: transparent;

                > .ui-list-item {
                    box-sizing: border-box;

                    @extend .font-regular;

                    &:last-child {
                        border-bottom: 1px solid $border-primary;
                    }

                    &:hover {
                        background: $bcg-dark;
                        border-color: $border-primary;
                        z-index: initial;
                    }

                    .ui-panel {
                        background: transparent;
                    }

                    .ui-button.dropdown {
                        @extend .font-icon;

                        &:not(.hidden) {
                            display: block;
                        }

                        width: 16px;
                        height: 16px;
                        line-height: 16px;
                        border: none;
                        padding: 0;
                        margin: 0;
                        text-align: center;
                        font-size: 12px;
                        color: $bcg-darkest;
                        background-color: $text-darkest;

                        &:hover,
                        &.clicked {
                            color: $text-primary;
                            background-color: $bcg-darkest;
                        }
                    }
                }
            }

            .branches,
            .checkpoints {
                overflow-y: auto;

                .spinner {
                    margin: 200px auto auto;
                }

                .ui-list {
                    @extend .allowSelect;
                }

                .ui-list > .ui-list-item.load-more {
                    pointer-events: none;

                    &:hover {
                        background: transparent;
                    }

                    .ui-button {
                        width: 100%;
                        margin: auto;
                        text-align: center;
                        height: 28px;
                        font-size: 12px;
                        line-height: 28px;
                        pointer-events: all;
                    }
                }
            }

            .branches {
                .ui-list {
                    > .ui-list-item {
                        height: 82px;
                        padding: 20px 10px;

                        .ui-label {
                            display: block;

                            &.icon {
                                @extend .font-icon;

                                float: left;
                                font-size: 8px;
                                margin-top: 8px;

                                &.active {
                                    color: #4ae22b;
                                }
                            }

                            &.name {
                                color: $text-primary;
                                margin-left: 25px;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                width: 210px;
                            }

                            &.branch-id {
                                margin-top: -5px;
                                margin-left: 25px;
                            }
                        }

                        .ui-button.dropdown {
                            position: absolute;
                            right: 0;
                            top: 8px;
                        }
                    }
                }
            }

            .checkpoints {
                height: 496px; // for some reason percentages don't work

                .ui-list {
                    > .ui-list-item {
                        height: auto;
                        padding: 25px 15px;
                        border-bottom: 1px solid transparent;

                        &.selected,
                        &:hover {
                            background: transparent;
                            cursor: default;
                        }

                        .ui-button.dropdown {
                            margin-left: 15px;
                            margin-top: 10px;
                        }

                        .ui-checkbox {
                            display: none;
                        }

                        &.current-state {
                            padding-top: 10px;
                            padding-bottom: 10px;

                            .ui-label {
                                width: 100%;

                                &::before {
                                    content: '\E326';

                                    @extend .font-icon;

                                    margin-right: 20px;
                                    margin-left: 5px;
                                    font-size: 16px;
                                    color: $text-primary;
                                }
                            }

                            + .date {
                                border-top: none;
                            }
                        }
                    }

                    > .date {
                        background: $bcg-dark;
                        color: $text-secondary;
                        border-top: 1px solid $border-primary;
                        border-bottom: 1px solid $border-primary;
                        height: 35px;
                        line-height: 35px;
                        padding: 0 15px;
                        text-transform: uppercase;

                        &:first-child {
                            border-top: 0;
                        }
                    }

                    .ui-list-item + .ui-list-item {
                        border-top: 1px solid $border-primary;
                    }
                }
            }

            &.diff-checkpoints {
                position: absolute;
                width: 100%;
                bottom: 0;
                background: $bcg-dark;
                height: 130px;
                overflow: hidden;

                > .ui-header::before {
                    @extend .font-icon;

                    content: '\E236';
                    font-size: 14px;
                    font-weight: 100;
                    float: left;
                    margin-right: 10px;
                    color: $text-active;
                }

                > .ui-header > .close {
                    @extend .font-icon;

                    float: right;
                    background: transparent;
                    border: 0;
                }

                > .content {
                    height: calc(100% - 35px);

                    > .checkpoint {
                        position: absolute;
                        top: 10px;
                        width: 350px;
                        height: 75px;
                        z-index: 1;
                        background: $bcg-darker;
                        border: 1px solid $border-primary;

                        &.empty {
                            border: 1px dashed $text-active;

                            > .content {
                                > .ui-label.diff-info {
                                    display: block;
                                    margin-top: 27px;
                                    text-align: center;
                                    font-size: 12px;
                                    font-weight: bold;
                                }

                                > .checkpoint-content {
                                    display: none;
                                }
                            }

                            & ~ .empty {
                                border-color: $bcg-darkest;

                                > .content > .ui-label.diff-info {
                                    display: none;
                                }
                            }
                        }

                        &.checkpoint-left {
                            left: 15px;
                        }

                        &.checkpoint-right {
                            left: 405px;
                        }

                        > .content {
                            height: 100%;

                            > .ui-label.diff-info {
                                display: none;
                            }

                            > .checkpoint-content {
                                height: 100%;

                                > .ui-header {
                                    padding: 0 15px;
                                    height: 28px;
                                    background: transparent;
                                    border-bottom: 1px solid $border-primary;

                                    &::before {
                                        content: '\E399';

                                        @extend .font-icon;

                                        margin-right: 5px;
                                        float: left;
                                        font-weight: 100;
                                        font-size: 14px;
                                    }

                                    > .title {
                                        max-width: 280px;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                    }

                                    > .close {
                                        @extend .font-icon;

                                        background: transparent;
                                        border: 0;
                                        position: absolute;
                                        right: 0;
                                    }
                                }

                                > .content {
                                    padding: 8px 15px;

                                    > .ui-label {
                                        display: block;
                                        line-height: 1;
                                        font-size: 12px;
                                        white-space: nowrap;
                                        overflow: hidden;
                                        text-overflow: ellipsis;

                                        &.title {
                                            color: $text-primary;
                                            font-weight: bold;
                                        }

                                        &.desc {
                                            font-size: 11px;
                                            color: $text-dark;
                                        }
                                    }
                                }
                            }
                        }
                    }

                    > .arrow {
                        position: absolute;
                        left: 375px;
                        top: 35px;
                        font-size: 18px;

                        @extend .font-icon;
                    }

                    > .ui-button {
                        position: absolute;
                        width: 90px;
                        right: 10px;
                        font-size: 12px;
                        line-height: 32px;
                        height: 32px;
                        text-align: center;
                        background: $bcg-primary;
                        border: 1px solid $border-primary;

                        &.compare {
                            top: 7px;
                        }

                        &.switch {
                            top: initial;
                            bottom: 5px;

                            &::before {
                                content: '\E128';

                                @extend .font-icon;

                                margin-right: 5px;
                            }
                        }
                    }
                }
            }
        }
    }

    &.diff-mode {
        > .content {
            .checkpoints {
                height: 522px - 130px;
            }

            .checkpoints,
            .branches {
                .ui-list {
                    > .ui-list-item {
                        .ui-button.dropdown {
                            display: none;
                        }

                        .ui-checkbox {
                            display: inherit;
                            margin-left: 15px;
                        }

                        &.current-state {
                            + .date {
                                border-top: 1px solid $border-primary;
                            }

                            .btn-view-changes {
                                display: none;
                            }
                        }
                    }
                }
            }

            .branches-container,
            .side-panel {
                height: calc(100% - 130px);
            }
        }

        &.diff-checkpoints-selected-2 {
            > .content {
                .checkpoints {
                    .ui-list > .ui-list-item .ui-checkbox:not(.checked) {
                        opacity: $disabled-opacity;
                        pointer-events: none;
                    }
                }
            }
        }
    }

    .branch-actions {
        border-bottom: 1px solid $border-primary;
    }

    .ui-button.icon {
        background-color: $bcg-dark;

        &:hover {
            background-color: $bcg-darkest;

            &::before {
                color: $text-active;
            }
        }

        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1 0 0;
        font-size: 12px;
        border: none;
        position: relative;
        height: 26px;
        line-height: 26px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 0;

        &.hidden {
            display: none;
        }

        &:not(:last-of-type) {
            border-right: 1px solid $border-primary;
        }

        &::before {
            @extend .font-icon;

            font-size: 14px;
            line-height: inherit;
            margin-right: 8px;
            font-weight: 100;
        }

        &.create::before {
            content: '\E120';
        }

        &.diff::before {
            content: '\E236';
        }

        // TODO: remove unicode star hack once a star has been added to the icon font
        &.favorite::before {
            content: '\2605';
            font-family: none;
            font-size: 12px;
            line-height: 1.1;
        }

        &.vc-graph::before {
            content: '\E399';
        }
    }
}

.ui-panel.vc-graph-panel {
    .joint-element {
        cursor: pointer;
    }

    .v-line {
        font-family: Arial, sans-serif;
        font-size: 12px;
    }
}

.pcui-menu.vc-node-menu {
    .pcui-menu-item {
        background-color: #293234;
    }
}

.ui-overlay.picker-conflict-manager {
    z-index: 300; // larger than drop-area's

    > .content {
        width: 1240px;
        height: 700px;
        left: calc(50% - 620px);
        top: calc(50% - 350px);

        .ui-label:not(.selectable) {
            @extend .noSelect;
        }

        > .ui-panel {
            height: 100%;

            > .ui-header {
                .ui-button.close {
                    @extend .font-icon;

                    position: absolute;
                    right: 0;
                    margin: 0;
                    top: 4px;
                    background: transparent;
                    border: 0;
                }
            }

            > .content {
                height: 100%;
                border-top: 1px solid $border-primary;

                > .ui-panel.left {
                    min-width: 250px;
                    height: 100%;
                    border-right: 1px solid $border-primary;

                    > .content {
                        height: 100%;
                        flex-direction: column;

                        > .ui-list {
                            background: transparent;
                            border: 0;
                            margin: 0;
                            overflow-y: auto;

                            > .ui-list-item {
                                height: 80px;
                                padding: 25px 15px;
                                box-sizing: border-box;

                                &:last-child {
                                    border-bottom: 1px solid $border-primary;
                                }

                                .ui-panel {
                                    background: transparent;
                                }

                                > .ui-panel {
                                    > .content {
                                        > .icon {
                                            @extend .font-icon;

                                            margin-right: 15px;
                                            vertical-align: top;
                                            font-size: 8px;

                                            &.resolved {
                                                color: #4ae22b;
                                            }

                                            &.conflict {
                                                color: #fb222f;
                                            }
                                        }

                                        > .ui-panel {
                                            display: inline-block;
                                            margin-top: -7px;
                                            width: 85%;

                                            > .content {
                                                > .ui-label {
                                                    display: block;
                                                    margin: 0;

                                                    @extend .font-regular;

                                                    overflow: hidden;
                                                    text-overflow: ellipsis;

                                                    &.name {
                                                        color: $text-primary;
                                                        font-size: 13px;
                                                        margin-top: 2px;
                                                    }

                                                    &.type {
                                                        font-size: 12px;
                                                        color: $text-secondary;
                                                        margin-top: -5px;
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }

                        > .ui-button {
                            height: 60px;
                            line-height: 60px;
                            margin: 0;
                            font-size: 12px;
                            text-align: center;
                        }

                        .confirm {
                            background-color: $text-active;
                            color: $text-primary;
                        }
                    }
                }

                > .ui-panel.right {
                    overflow: hidden;

                    $vertical-section-width: 330px;
                    $name-width: 130px;
                    $value-width: 140px;
                    $indent-width: 10px;

                    > .content {
                        height: 100%;
                        flex-direction: column;

                        .vertical-border {
                            position: absolute;
                            height: 100%;
                            width: 1px;
                            background: $border-primary;
                            z-index: 1;

                            &.vertical-border-0 {
                                left: 33.333%;
                            }

                            &.vertical-border-1 {
                                left: 66.666%;
                            }
                        }

                        > .ui-label.progress-text {
                            margin-top: 250px;
                            text-align: center;
                            margin-bottom: 20px;
                            font-size: 16px;
                            color: $text-primary;
                        }

                        > .progress-icon {
                            margin: 0 auto;

                            &.spin {
                                g {
                                    animation-name: spin;
                                    animation-duration: 500ms;
                                    animation-iteration-count: infinite;
                                    animation-timing-function: linear;
                                    transform-origin: center;
                                }
                            }
                        }

                        > .ui-panel {
                            flex-grow: 1;
                        }

                        > .ui-panel.top {
                            > .content {
                                > .ui-panel {
                                    flex-grow: 1;
                                    flex-basis: $vertical-section-width;
                                    padding: 0 10px;

                                    @extend .font-bold;

                                    font-size: 12px;
                                    box-sizing: border-box;
                                    height: 34px;
                                    line-height: 34px;
                                    background: $bcg-dark;

                                    .ui-label {
                                        margin: 0;
                                        color: $text-primary;
                                        vertical-align: middle;
                                        max-width: 320px;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        white-space: nowrap;

                                        &::before {
                                            content: '\E399';

                                            @extend .font-icon;

                                            color: $text-active;
                                            margin-right: 10px;
                                            font-size: 15px;
                                        }
                                    }

                                    &.base .ui-label::before {
                                        content: '\E117';
                                    }
                                }
                            }
                        }

                        > .ui-panel.bottom {
                            height: 60px;

                            > .content {
                                height: 100%;

                                > .ui-panel {
                                    flex-grow: 1;
                                    flex-basis: $vertical-section-width;
                                    border-top: 1px solid $border-primary;
                                    box-sizing: border-box;

                                    > .content {
                                        height: 100%;
                                        align-content: center;

                                        > .ui-button {
                                            margin: auto;
                                            font-size: 12px;
                                            text-align: center;
                                            width: 80%;
                                        }
                                    }
                                }
                            }
                        }

                        > .ui-panel.conflicts {
                            height: calc(100% - #{(28px + 60px)});
                            overflow: hidden auto;
                            font-size: 12px;

                            > .content {
                                > .ui-panel.section {
                                    width: 100%;
                                    border-top: 1px solid $border-primary;

                                    &.cloaked {
                                        overflow: visible;
                                        background: $bcg-darker;

                                        > .ui-header {
                                            display: none;
                                        }

                                        > .content {
                                            display: none;
                                        }
                                    }

                                    > .ui-header {
                                        z-index: 2;
                                        background: $bcg-dark;
                                        border-bottom: 1px solid $border-primary;
                                        position: relative;

                                        @extend .font-bold;

                                        > .title {
                                            float: none;
                                            display: block;
                                            direction: rtl; // to put ellipsis on the left
                                            text-align: left;
                                            max-width: calc(100% - 72px);
                                            overflow: hidden;
                                            text-overflow: ellipsis;
                                        }

                                        > .ui-label.num-conflicts {
                                            position: absolute;
                                            top: 2px;
                                            right: -3px;
                                            margin-right: 10px;
                                            color: $text-dark;

                                            @extend .font-bold;
                                        }
                                    }

                                    &.foldable {
                                        > .ui-header {
                                            background: color.adjust($bcg-dark, $lightness: 1%);
                                            color: $text-primary;

                                            @extend .font-regular;
                                        }
                                    }

                                    > .content {
                                        > .ui-panel {
                                            flex-grow: 1;
                                            flex-basis: $vertical-section-width;
                                            box-sizing: border-box;

                                            > .content {
                                                > .ui-panel.conflict-field {
                                                    height: auto;
                                                    margin: 10px;
                                                    padding: 5px 15px 5px 25px;
                                                    box-sizing: border-box;

                                                    &.indent-1 {
                                                        padding-left: 35px;
                                                    }

                                                    > .content {
                                                        white-space: nowrap;

                                                        .ui-label {
                                                            margin: 0;
                                                            padding: 0;
                                                            overflow: hidden;
                                                            text-overflow: ellipsis;
                                                        }

                                                        > .ui-label {
                                                            vertical-align: top;

                                                            &.name {
                                                                width: $name-width;
                                                                margin-right: 10px;
                                                                white-space: nowrap;
                                                            }
                                                        }

                                                        .value {
                                                            display: inline-block;
                                                            max-width: $value-width;
                                                            font-family: inconsolatamedium;
                                                            white-space: normal;
                                                            background: transparent;
                                                        }
                                                    }

                                                    &.indent-1 > .content {
                                                        .name {
                                                            width: $name-width - $indent-width;
                                                        }

                                                        .value {
                                                            max-width: $value-width - $indent-width;
                                                        }
                                                    }

                                                    &::before {
                                                        content: ' ';
                                                        position: absolute;
                                                        top: -10px;
                                                        left: -10px;
                                                        width: calc(100% + 20px);
                                                        height: calc(100% + 20px);
                                                        background: $bcg-darkest;
                                                        opacity: 0;
                                                        transition: opacity 100ms;
                                                    }

                                                    &.hovered::before {
                                                        opacity: 0.5;
                                                    }

                                                    .field-vector {
                                                        background: transparent;

                                                        .ui-label {
                                                            display: block;
                                                            white-space: nowrap;
                                                        }
                                                    }

                                                    .field-color {
                                                        &.ui-color-field {
                                                            pointer-events: none;

                                                            &::after {
                                                                display: none;
                                                            }
                                                        }
                                                    }

                                                    .field-asset .asset-name {
                                                        margin-bottom: -5px;
                                                    }

                                                    .field-string {
                                                        word-break: break-word;
                                                    }

                                                    .field-asset .asset-id,
                                                    .field-entity .entity-id {
                                                        display: block;
                                                        opacity: 0.6;
                                                    }

                                                    .field-entity {
                                                        .entity-name {
                                                            margin-bottom: -2px;
                                                        }

                                                        .entity-id {
                                                            line-height: initial;
                                                        }

                                                        .deleted {
                                                            line-height: initial;
                                                            margin-bottom: 5px;
                                                        }
                                                    }

                                                    .field-curve {
                                                        border: 0;
                                                        margin: 0;
                                                        background-color: $bcg-dark !important;
                                                        pointer-events: none;
                                                        height: 25px;
                                                    }

                                                    .field-deleted,
                                                    .field-edited {
                                                        .ui-label {
                                                            display: block;

                                                            @extend .font-regular;

                                                            &.title {
                                                                color: $text-primary;
                                                                font-size: 13px;
                                                            }
                                                        }
                                                    }

                                                    &.field-array-container {
                                                        > .content {
                                                            height: 100%;
                                                        }

                                                        .field-array {
                                                            display: block;
                                                            max-width: 100%;
                                                            height: 100%;

                                                            > .content {
                                                                height: 100%;

                                                                > .ui-label {
                                                                    margin-left: $indent-width;
                                                                }

                                                                > .ui-list {
                                                                    height: 100%;
                                                                    margin: 0;
                                                                    margin-left: 2 * $indent-width;
                                                                    margin-top: 5px;
                                                                    padding: 0;
                                                                    background: transparent;
                                                                    border: 0;
                                                                    box-sizing: border-box;

                                                                    @extend .allowSelect;

                                                                    > .ui-list-item {
                                                                        border: 0;
                                                                        margin: 0;
                                                                        box-sizing: border-box;
                                                                        height: auto;
                                                                        pointer-events: none;
                                                                        border-left: 1px solid $border-primary;
                                                                        white-space: normal;
                                                                        padding-bottom: 10px;

                                                                        &:last-child {
                                                                            padding-bottom: 0;
                                                                        }

                                                                        .ui-panel {
                                                                            background: transparent;
                                                                        }

                                                                        .ui-label {
                                                                            display: block;
                                                                        }

                                                                        .field-curve {
                                                                            width: 100%;
                                                                        }
                                                                    }
                                                                }
                                                            }
                                                        }
                                                    }
                                                }

                                                > .ui-label.title {
                                                    display: block;
                                                    margin: 0;
                                                    padding: 0 10px 0 34px;
                                                    height: 32px;
                                                    line-height: 32px;
                                                    color: $text-primary;
                                                    background: color.mix($bcg-primary, $bcg-dark, 50%);
                                                    box-sizing: border-box;

                                                    &.indent-1 {
                                                        padding-left: 44px;
                                                    }

                                                    &:not(.light) {
                                                        @extend .font-bold;

                                                        background: color.adjust($bcg-dark, $lightness: 1%);
                                                    }

                                                    &.light {
                                                        font-size: 11px;
                                                    }
                                                }
                                            }

                                            &.theirs,
                                            &.mine {
                                                > .content {
                                                    > .ui-panel.conflict-field {
                                                        $dis: &;
                                                        $selected-color: rgb(105 184 117);

                                                        cursor: pointer;

                                                        &::after {
                                                            content: ' ';
                                                            display: block;
                                                            position: absolute;
                                                            top: 0;
                                                            left: 0;
                                                            width: 100%;
                                                            height: 100%;
                                                            z-index: 2;
                                                            background: rgba($selected-color, 0);
                                                            border: 1px solid rgba($selected-color, 0);
                                                            border-radius: 2px;
                                                            transition: background-color 100ms, border-color 100ms;
                                                            pointer-events: none;
                                                        }

                                                        &:not(.selected):hover {
                                                            &::after {
                                                                background: rgba($selected-color, 0.03);
                                                                border: 1px solid rgba($selected-color, 0.2);
                                                            }
                                                        }

                                                        &.selected::after {
                                                            background: rgba($selected-color, 0.06);
                                                            border: 1px solid rgba($selected-color, 0.3);
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }

                                > .ui-label.section-separator {
                                    display: block;
                                    position: relative;
                                    z-index: 2;
                                    height: 32px;
                                    line-height: 32px;
                                    padding: 0 10px;
                                    margin: 0;
                                    background: $bcg-dark;
                                    border-top: 1px solid $border-primary;

                                    @extend .font-bold;

                                    color: $text-primary;
                                }
                            }
                        }

                        > .textmerge-top {
                            height: 36px;
                            line-height: 36px;
                            padding: 0 10px;

                            > .content {
                                > .ui-label.name {
                                    color: $text-primary;
                                    margin: 0;
                                    vertical-align: middle;
                                }

                                > .ui-button {
                                    font-size: 12px;
                                    float: right;
                                    margin: 0;
                                    margin-top: 5px;
                                    margin-left: 15px;

                                    &::before {
                                        @extend .font-icon;

                                        margin-right: 5px;
                                        vertical-align: middle;
                                        font-size: 16px;
                                    }

                                    &.mark-resolved {
                                        background: color.adjust($text-active, $lightness: -7%);
                                        color: $text-primary;

                                        &::before {
                                            content: '\E133';
                                        }

                                        &:hover,
                                        &:focus {
                                            background: color.adjust($text-active, $lightness: -12%);
                                        }
                                    }

                                    &.use-all {
                                        &::after {
                                            @extend .font-icon;

                                            margin-left: 5px;
                                            vertical-align: middle;
                                            font-size: 16px;
                                            content: '\E159';
                                        }
                                    }

                                    &.go-back::before {
                                        content: '\E158';
                                    }

                                    &.go-to-prev::before {
                                        content: '\E162';
                                    }

                                    &.go-to-next {
                                        margin-left: 0;

                                        &::after {
                                            @extend .font-icon;

                                            margin-left: 5px;
                                            vertical-align: middle;
                                            font-size: 16px;
                                            content: '\E164';
                                        }
                                    }
                                }
                            }
                        }

                        > iframe {
                            width: 100%;
                            height: 100%;
                            border: 0;
                        }
                    }

                    &.file-conflicts-visible {
                        > .content {
                            .vertical-border {
                                height: 375px;
                            }

                            > .ui-panel {
                                flex-grow: 0;

                                &.conflicts {
                                    height: 280px;
                                }

                                &.file-conflicts {
                                    flex-grow: 1;

                                    > .content {
                                        padding-top: 90px;
                                        flex-direction: column;

                                        > * {
                                            margin: auto;
                                            margin-top: 10px;

                                            &.ui-label.font-icon {
                                                color: $text-active;
                                                font-size: 64px;
                                                margin-bottom: 10px;
                                            }

                                            &.ui-label.file-conflicts {
                                                font-size: 14px;
                                                color: $text-primary;
                                            }

                                            &.ui-button {
                                                font-size: 12px;
                                                width: 220px;
                                                text-align: center;
                                                margin-top: 20px;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    &.diff {
        > .content {
            > .ui-panel {
                > .content {
                    > .ui-panel.left {
                        > .content {
                            .ui-list-item {
                                padding: 25px 15px 25px 32px;

                                .icon {
                                    display: none;
                                }
                            }
                        }
                    }

                    > .ui-panel.right {
                        > .content {
                            > .ui-panel.conflicts {
                                height: 100%;

                                > .content {
                                    > .ui-panel.section {
                                        > .content {
                                            > .ui-panel {
                                                > .content {
                                                    > .ui-panel.conflict-field {
                                                        cursor: default;

                                                        &::after {
                                                            pointer-events: all;
                                                            display: none;
                                                        }

                                                        &:nth-child(odd)::before {
                                                            opacity: 0.4;
                                                            background: $bcg-dark;
                                                        }

                                                        .field-deleted,
                                                        .field-edited,
                                                        .field-missing {
                                                            max-width: 100% !important;
                                                        }

                                                        > .content {
                                                            > .ui-label.name {
                                                                white-space: normal;
                                                                line-height: 1em;
                                                            }

                                                            .value {
                                                                max-width: 270px;
                                                            }
                                                        }

                                                        &.indent-1 > .content {
                                                            .value {
                                                                max-width: 260px;
                                                            }
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }
                            }

                            > .vertical-border-1 {
                                display: none;
                            }

                            > .ui-panel.top {
                                > .content {
                                    > .ui-panel {
                                        .ui-label {
                                            max-width: 470px;
                                        }
                                    }
                                }
                            }
                        }

                        &.file-conflicts-visible {
                            > .content {
                                > .ui-panel.file-conflicts > .content {
                                    padding-top: 45px;
                                    padding-bottom: 45px;
                                }

                                .vertical-border {
                                    height: 427px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

.picker-team-management {
    display: flex;
    height: calc(100% - 30px);
    flex-direction: column;
    align-items: center;
    gap: 50px;
    padding: 15px 20px !important;

    .pcui-disabled {
        cursor: not-allowed !important;

        input {
            cursor: not-allowed !important;
        }

        &::after {
            display: inline-block !important;
        }
    }

    .section-label {
        @extend .font-regular;

        color: $text-primary;
        text-align: start;
        white-space: pre-wrap;
        width: 20%;
    }

    > .invite-container {
        display: flex;
        justify-content: space-around;
        width: 100%;
        height: min-content;

        & > .invite-input-container {
            position: relative;
            display: flex;
            width: 80%;
            height: max-content;

            & > .invite-input-group {
                display: flex;
                height: 100%;
                width: 100%;

                > .invite-input {
                    width: 80%;
                    height: 28px;
                    margin-left: 0;
                    margin-bottom: 0;

                    &::after {
                        left: 0;
                        bottom: 0;
                        right: auto;
                        font-size: 0.8em;
                        line-height: 2.5em;
                    }
                }

                > .invite-submit {
                    width: 30%;
                    font-weight: 500;
                    background-color: $bcg-darker;
                    line-height: normal !important;
                    border: none;
                }
            }

            & > .invite-warning {
                display: block;
                width: 100%;
                margin: 5px 0 0;
                white-space: pre-wrap;

                & > .warning-link--white {
                    color: $text-primary;
                }

                & > .warning-link::after {
                    @extend .font-icon;

                    content: '\E112';
                    margin-left: 5px;
                }
            }
        }
    }

    > .owner-container {
        display: flex;
        justify-content: space-around;
        width: 100%;
        height: min-content;

        > .owner-widget-container {
            display: block;
            height: min-content;
            width: 80%;
        }
    }

    > .members-container {
        display: flex;
        justify-content: space-around;
        flex-direction: row;
        width: 100%;
        height: max-content;
        max-height: 100%;

        > .members-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-auto-rows: min-content;
            overflow-y: visible;
            gap: 20px;
            width: 80%;

            > .user-collaborator {
                border-bottom: 1px solid $text-active;
            }
        }
    }

    .collaborator-container {
        height: 62px;
        margin: 0 10px 0 0;
        display: grid;
        grid-template-columns: 62px calc(100% - 62px);

        > .collaborator-image {
            display: inline-block;
            background-color: white;
        }

        > .collaborator-right-container {
            width: calc(100% - 20px);
            margin-right: 10px;
            padding: 0 10px;
            background-color: $bcg-darker;

            > .collaborator-first-row {
                display: flex;
                width: 100%;
                justify-content: space-between;

                > span {
                    width: calc(100% - 70px);
                    margin-bottom: 0;
                }

                > .pcui-button {
                    box-shadow: none;
                    margin-top: 0;
                    margin-right: 0;
                    margin-bottom: 0;
                    padding-right: 0;
                    border: none;
                    font-size: 1.1em;
                    background-color: transparent;

                    &:hover:not(.pcui-disabled) {
                        color: $text-active;
                    }
                }
            }

            > .pcui-select-input {
                width: 100%;
                margin-left: 0;
            }

            > span {
                color: rgba($text-primary, 0.3);
            }
        }
    }
}

.ui-panel.asset-list {
    margin: 3px;
    flex-grow: 1;
    background: transparent;
    overflow: hidden;

    > .content {
        flex-direction: column;

        > .ui-panel.buttons {
            background: $bcg-dark;
            padding: 3px;

            > .content {
                flex-wrap: wrap;

                .ui-label {
                    display: block;
                    font-size: 12px;
                    width: 100%;
                    flex-basis: 100%;
                    color: $text-darkest;
                    margin: -1px 3px 0 6px;
                }

                .ui-button {
                    background: $bcg-primary;
                    font-size: 12px;
                    text-align: center;
                    margin: auto;

                    &::before {
                        @extend .font-icon;

                        margin-right: 5px;
                    }

                    &.add-assets {
                        margin-right: 3px;
                        flex-grow: 1;

                        &::before {
                            content: '\E120';
                        }
                    }

                    &.done::before {
                        content: '\E133';
                    }
                }
            }
        }

        > .ui-button.selection-mode {
            flex-grow: 1;
            font-size: 12px;
            color: $text-darkest;
            height: 22px;
            line-height: 22px;
            margin: 0;

            &:hover {
                color: $text-primary;
            }

            &::after {
                content: '\E120';

                @extend .font-icon;

                position: absolute;
                top: 1px;
                right: 5px;
            }

            &.selecting {
                color: $text-primary;
                border: 1px solid $text-active;

                &::after {
                    content: '\E133';
                }
            }
        }

        .ui-text-field {
            width: 100%;
            margin: 10px 0 -6px;
            position: relative;
            color: $text-darkest;

            > input {
                padding-left: 28px;

                &::placeholder {
                    color: $text-darkest;
                }
            }

            &::before {
                @extend .font-icon;

                content: '\E129';
                position: absolute;
                top: 1px;
                left: 5px;
            }
        }

        .ui-list {
            margin: 0;
            margin-top: 5px;
            background: transparent;

            &.empty {
                display: none;
            }

            .ui-list-item {
                position: relative;
                padding: 0 2px 0 8px;

                &::before {
                    content: '\E209';

                    @extend .font-icon;

                    padding-right: 8px;
                    vertical-align: top;
                }

                > span {
                    display: inline-block;
                    max-width: calc(100% - 26px);
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                @extend .asset-icon-prefix;

                .ui-button {
                    visibility: hidden;
                    position: absolute;
                    top: 0;
                    right: 0;
                    display: block;
                    width: 22px;
                    height: 22px;
                    line-height: 22px;
                    margin: 0;
                    padding: 0;
                    border: none;

                    @extend .font-icon;

                    font-size: 12px;
                    text-align: center;
                    background: transparent;

                    &:hover {
                        background: transparent;
                    }

                    &.remove {
                        &:hover {
                            color: #d34141;
                        }

                        &::after {
                            content: '\E132';
                        }
                    }

                    &.play {
                        right: 15px;

                        &::after {
                            content: '\E131';
                        }
                    }
                }

                &:hover {
                    .ui-button {
                        visibility: visible;
                    }

                    > span {
                        max-width: calc(100% - 40px);
                    }
                }
            }
        }
    }
}

.ui-panel.animation {
    .ui-panel.asset-list {
        > .content {
            .ui-list {
                .ui-list-item {
                    &:hover {
                        > span {
                            max-width: calc(100% - 55px);
                        }
                    }
                }
            }
        }
    }
}

.ui-menu.textmerge-dropdown {
    .ui-menu-item {
        max-width: 300px;
        background: $bcg-dark;

        > .title {
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 12px;
            color: $text-primary;
        }
    }
}

@import '../common/ui-common';
@import '../common/version-control';
@import 'playcanvas-theme';
